/* ============================================================ LinPlan — design-system skin (loaded LAST in every ) Goal: keep the migrated REAL content, but render it in the Linplan design-system's clean "lifted cream paper" aesthetic — NOT the heavy scrapbook (washi tape / polaroid / blobs). Re-points the page's old token names to the DS palette and restyles the shared component classes to match the DS. ============================================================ */ :root { --ink: #1F2838; --ink-soft: #56607A; --ink-faint: #828A9C; --paper: #FDFBF5; --paper2: #EFE7D5; --white: #FFFFFF; --line: #E4D9C2; --orange: #C24A33; /* primary brand = terracotta */ --orange-deep: #A23A26; --orange-soft: #F0D9D0; --on-accent: #FDFBF5; --yellow: #B6926A; /* tan accent */ --yellow-soft: #ECDFCD; --teal: #6B6A40; /* olive secondary */ --teal-soft: #E6E3CF; --font: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic Pro', 'Meiryo', sans-serif; --hand: 'Klee One', 'Zen Kaku Gothic New', sans-serif; --en: 'Zen Kaku Gothic New', system-ui, sans-serif; --container: 1200px; /* DS surfaces / shadows reused below */ --bg-surface: #F7F1E4; --border-soft: #E4D9C2; --border-strong: #D6C8AC; --shadow-card: 0 1px 0 #FDFBF5, 0 8px 20px rgba(95,70,40,0.12); --shadow-lg: 0 14px 34px rgba(95,70,40,0.15); --radius-md: 12px; --radius-lg: 18px; --radius-xl: 26px; } /* ---- page surface: calm cream wash + faint paper grain ---- */ body { background-color: #FDFBF5; background-image: radial-gradient(rgba(150,120,80,0.05) 1px, transparent 1px), radial-gradient(rgba(150,120,80,0.035) 1px, transparent 1px); background-size: 22px 22px, 13px 13px; background-position: 0 0, 7px 11px; } /* ============================================================ NAV → floating rounded "pill" header; collapses to the original wavy hamburger once the hero is scrolled past. ============================================================ */ .site-nav { pointer-events: none; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: none; padding: 16px clamp(16px, 4vw, 40px); } .site-nav__inner { pointer-events: auto; max-width: var(--container); margin: 0 auto; height: auto; padding: 11px 14px 11px 22px; background: rgba(247,241,228,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--border-strong); border-radius: 999px; box-shadow: 0 10px 30px rgba(95,70,40,.14), 0 2px 6px rgba(95,70,40,.07); display: flex; align-items: center; justify-content: space-between; transition: background .3s ease, box-shadow .3s ease, padding .3s ease; } .site-nav__logo { display: inline-flex; } .site-nav__links { display: flex; align-items: center; gap: 20px; } .site-nav__links a:not(.btn) { font-family: var(--font); font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); } .site-nav__links a:not(.btn):hover { color: var(--orange-deep); } .site-nav__cta { border-radius: 999px; transform: none; font-family: var(--font) !important; box-shadow: none; } .hamburger { display: none; } /* ---- narrow screens: pill keeps logo + hamburger, links hidden ---- */ @media (max-width: 1040px) { .site-nav__links { display: none; } .hamburger { display: flex; } /* no floating pill on mobile — plain logo + hamburger on transparent bar */ .site-nav__inner { background: transparent; border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 4px 4px; } } /* ============================================================ STRIP the scrapbook motifs ============================================================ */ /* floating blobs & stars, head squiggles, seed shapes */ .section .blob, .cta-band .blob, .gp__seed, .section__head > svg { display: none; } /* paper-sheet backgrounds, tape strips & push-pins on every section */ .section:not(:has(.cta-box)) > .container { background: transparent; box-shadow: none; border-radius: 0; padding: 0 28px; } .section:not(:has(.cta-box)) > .container::before, .section:not(:has(.cta-box)) > .container::after, .section:has(.cta-box) > .container::before, .section:has(.cta-box) > .container::after, .cta-band > .container::before, .cta-band > .container::after { display: none; } /* loose tape stickers anywhere */ .tape { display: none; } /* ============================================================ BUTTONS → DS buttons (gently-rounded, not tilted pills) ============================================================ */ .btn { font-family: var(--font); font-weight: 700; } .btn--primary { background: var(--orange); color: var(--on-accent); border-radius: var(--radius-md); transform: none; padding: 13px 24px; box-shadow: 0 2px 6px rgba(162,58,38,.18); } .btn--primary:hover { transform: translateY(-1px); background: var(--orange-deep); color: var(--on-accent); } .btn--ink, .btn--white { border-radius: var(--radius-md); transform: none; box-shadow: var(--shadow-card); } .btn--outline { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--ink); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); padding: 13px 24px; font-family: var(--font); font-weight: 700; cursor: pointer; transition: background .2s, border-color .2s, transform .2s; } .btn--outline:hover { background: var(--bg-surface); border-color: var(--ink); transform: translateY(-1px); } /* ============================================================ CARDS → DS "lifted cream paper" (no tilt, soft hairline) ============================================================ */ .polaroid { background: var(--bg-surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); padding: 12px 12px 16px; transform: none; } .polaroid:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .polaroid__shot { border-radius: var(--radius-md); } .polaroid__name { font-family: var(--hand); } .browser { border-radius: var(--radius-lg); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); } .browser__bar { background: var(--bg-surface); } .faq-item, .post-card, .value-card { background: var(--bg-surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); } .post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .post-card__thumb { background: var(--orange-soft); color: var(--orange-deep); } .flow-step__card, .gp-step { background: var(--bg-surface); border: 1px solid var(--border-soft); box-shadow: var(--shadow-card); border-radius: var(--radius-lg); transform: none; } .feature__visual, .menu, .profile__photo, .hero__maker, .cmpb__lane { transform: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .profile__photo { background: var(--bg-surface); padding: 14px 14px 22px; } /* keyword tags → DS Tag pills */ .polaroid__tags span, .feature__tag, .menu__std-items, .update-item__cat { background: var(--bg-page, #FDFBF5); border: 1.5px solid var(--border-strong); color: var(--ink-soft); border-radius: 999px; } /* eyebrow label */ .eyebrow { font-family: var(--font); font-weight: 700; letter-spacing: .12em; color: var(--orange); } /* CTA boxes: flatten, DS radius, keep terracotta / olive surfaces */ .cta-box { transform: none; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); } /* prose links */ .prose a { color: var(--orange-deep); } ::selection { background: var(--orange); color: var(--on-accent); } /* ============================================================ HOME HERO → DS two-column (copy + pasted illustration card) ============================================================ */ .lnhero { position: relative; padding: 150px 0 70px; } .lnhero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .lnhero__kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 22px; } .lnhero__badge { display: inline-flex; align-items: center; background: var(--orange-soft); color: var(--orange-deep); font-family: var(--font); font-weight: 700; font-size: .82rem; padding: 6px 14px; border-radius: 999px; } .lnhero__hand { font-family: var(--hand); font-size: 1.25rem; color: var(--teal); } .lnhero__title { font-family: var(--hand); font-weight: 600; font-size: clamp(2.4rem, 4.6vw, 3.5rem); line-height: 1.28; letter-spacing: -.01em; color: var(--ink); margin: 0; } .lnwave { padding-bottom: .3em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 16' preserveAspectRatio='none'%3E%3Cpath d='M2 9 Q9 2 16 9 T30 9 T44 9 T58 9 T72 9 T86 9 T100 9 T114 9 T128 9 T142 9 T156 9 T170 9 T184 9 T198 9' fill='none' stroke='%236B6A40' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 0.5em; } .lnhero__sub { color: var(--ink-soft); font-size: 1.02rem; line-height: 2; margin-top: 24px; max-width: 42ch; } .lnhero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .lncard { position: relative; margin: 0; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 16px 12px; transform: rotate(-1.2deg); } .lncard__tape { position: absolute; top: -12px; left: 50%; transform: translateX(-50%) rotate(-3deg); width: 92px; height: 26px; background: linear-gradient(135deg, rgba(182,146,106,.55), rgba(214,200,172,.4)); box-shadow: 0 1px 3px rgba(95,70,40,.16); border-radius: 1px; } .lncard img { width: 100%; display: block; border-radius: var(--radius-md); } .lncard figcaption { font-family: var(--hand); text-align: center; font-size: 1.2rem; color: var(--ink-soft); margin-top: 6px; } @media (max-width: 880px) { .lnhero { padding: 120px 0 50px; } .lnhero__grid { grid-template-columns: 1fr; gap: 36px; } .lnhero__art { max-width: 420px; } } /* QA: works "pair" grid (2 self-products) — 2-up desktop, 1-up mobile */ .prob-figure { position: absolute; right: 19%; top: 96px; width: clamp(120px, 10.5vw, 162px); height: auto; pointer-events: none; opacity: .96; user-select: none; } @media (max-width: 1240px) { .prob-figure { right: 5%; top: 84px; width: 120px; } } @media (max-width: 920px) { .prob-figure { display: none; } } .works-grid.is-pair { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin: 0 auto; } @media (max-width: 560px) { .works-grid.is-pair { grid-template-columns: 1fr; max-width: 360px; } } /* ============================================================ QA: balanced wrapping + drop desktop-tuned line breaks on mobile ============================================================ */ .section__desc, .lnhero__sub, .invite__sub, .lnhero__title, .grow-line { text-wrap: pretty; } @media (max-width: 600px) { /* let paragraph copy reflow naturally; keep heading breaks */ p br { display: none; } .section__desc br, .lnhero__sub br, .invite__sub br { display: none; } /* a touch more breathing room edge-to-edge */ .lnhero__sub, .section__desc { max-width: 100%; } }