/* ============================================================ FAMI LIVING — DESIGN SYSTEM Modern minimal · Editorial serif headlines + neutral grotesk ============================================================ */ :root { /* Palette — warm cream, deep forest, sage, sand */ --bg: #F4EFE6; --bg-2: #EBE5D8; --bg-3: #DFD8C8; --ink: #2F3B35; --ink-2: #4A554E; --muted: #6E7367; --line: #D9D2C2; --line-2: #C7BEA9; --sage: #7A8471; --sage-2: #5E6A57; --sand: #C9B89B; --sand-2: #B6A179; --paper: #FBF8F1; --black: #11140F; /* Type */ --serif: "Cormorant Garamond", "Times New Roman", serif; --sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace; /* Type scale — three headline sizes only, used everywhere */ --t-xs: 11px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 22px; --t-xl: 28px; --h3: clamp(26px, 2.4vw, 32px); --h2: clamp(40px, 5.2vw, 72px); --h1: clamp(56px, 8vw, 112px); /* Spacing */ --gutter: clamp(20px, 4vw, 56px); --section-pad: clamp(72px, 9vw, 140px); /* Motion */ --ease: cubic-bezier(.2,.7,.1,1); } /* Tweaks: palette variants applied via [data-palette] on */ html[data-palette="ink"] { --bg: #FAF8F2; --bg-2: #F1ECDF; --bg-3: #E5DECC; --ink: #11140F; --ink-2: #2A2D26; --line: #DAD3C0; --sage: #4F5A4A; --sand: #C9B89B; } html[data-palette="forest"] { --bg: #1F2A26; --bg-2: #28332E; --bg-3: #2F3B35; --ink: #F0EAD9; --ink-2: #D9D2C2; --muted: #A8AC9F; --line: #38443D; --line-2: #4A574F; --sage: #C9B89B; --sage-2: #DCC9A8; --sand: #7A8471; --paper: #28332E; } html[data-palette="sand"] { --bg: #EFE7D5; --bg-2: #E5DBC4; --bg-3: #D8CBAE; --ink: #2A2419; --line: #C8BB9A; --sage: #6F6A4E; --sand: #B49968; } /* Density toggle */ html[data-density="airy"] { --section-pad: clamp(96px, 12vw, 200px); } html[data-density="compact"] { --section-pad: clamp(48px, 6vw, 88px); } /* Type scale toggle */ html[data-type="display"] { --h1: clamp(64px, 9vw, 132px); --h2: clamp(48px, 6vw, 88px); --h3: clamp(28px, 2.6vw, 36px); } html[data-type="quiet"] { --h1: clamp(40px, 5vw, 72px); --h2: clamp(28px, 3.4vw, 48px); --h3: clamp(20px, 1.8vw, 24px); } /* Headline font family swap */ html[data-headline="sans"] { --serif: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; } html[data-headline="grotesk"] { --serif: "Söhne", "Inter Tight", "Helvetica Neue", sans-serif; } html[data-headline="modern-serif"] { --serif: "Fraunces", "Cormorant Garamond", "Times New Roman", serif; } html[data-headline="slab"] { --serif: "Fraunces", "Newsreader", "Times New Roman", serif; } /* Headline style: DEFAULT is upright. Italic shape is opt-in via data-shape="italic". */ html h1 em, html h2 em, html h3 em, html .serif em { font-style: normal; } html .serif { font-style: normal; } /* Underline accent on em as the standard emphasis */ html h1 em, html h2 em { background-image: linear-gradient(transparent 92%, var(--sage) 92%, var(--sage) 100%); background-repeat: no-repeat; background-size: 100% 100%; padding: 0 0.04em; } /* Restore italics only when explicitly chosen */ html[data-shape="italic"] h1 em, html[data-shape="italic"] h2 em, html[data-shape="italic"] h3 em, html[data-shape="italic"] .serif em { font-style: italic; background-image: none; padding: 0; } html[data-shape="italic"] .lede { font-style: italic; } /* Accent color override */ html[data-accent="rust"] { --sage: #A65C3D; --sage-2: #8E4A2E; } html[data-accent="ocean"] { --sage: #2C4A52; --sage-2: #1F363C; } html[data-accent="ink"] { --sage: #1F2A26; --sage-2: #11140F; } html[data-accent="gold"] { --sage: #B6924A; --sage-2: #8E6F33; } /* ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--t-base); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { background: var(--bg); min-height: 100vh; overflow-x: hidden; } ::selection { background: var(--ink); color: var(--bg); } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } /* ===== Type ===== */ h1, h2, h3, h4, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.02; color: var(--ink); margin: 0; text-wrap: balance; } h1 { font-size: var(--h1); letter-spacing: -0.025em; } h2 { font-size: var(--h2); letter-spacing: -0.02em; } h3 { font-size: var(--h3); letter-spacing: -0.01em; line-height: 1.18; } p { margin: 0; text-wrap: pretty; } .eyebrow { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); font-weight: 400; } .lede { font-family: var(--serif); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; color: var(--ink-2); font-weight: 400; } .body-lg { font-size: var(--t-md); line-height: 1.6; color: var(--ink-2); } /* Italic-emphasis for serif accents (like editorial mags) */ .serif em { font-style: italic; font-family: var(--serif); } /* ===== Layout ===== */ .shell { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); } .section { padding: var(--section-pad) 0; } .divider { height: 1px; background: var(--line); width: 100%; } /* ===== Nav ===== */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid color-mix(in oklab, var(--line) 60%, transparent); } .nav-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; } .brand { display: flex; align-items: baseline; gap: 10px; font-family: var(--serif); font-size: 22px; letter-spacing: -0.01em; white-space: nowrap; flex-shrink: 0; justify-self: start; } .brand .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sage); display: inline-block; transform: translateY(-2px); } .brand small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .nav-links { display: flex; gap: 28px; justify-content: center; font-size: 13.5px; color: var(--ink-2); } .nav-links a { position: relative; padding: 6px 2px; transition: color .25s var(--ease); } .nav-links a:hover { color: var(--ink); } .nav-links a.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--ink); } .nav-cta { justify-self: end; display: flex; align-items: center; gap: 14px; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0.01em; cursor: pointer; transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease); } .btn:hover { transform: translateY(-1px); background: var(--ink-2); } .btn .arr { transition: transform .35s var(--ease); } .btn:hover .arr { transform: translateX(4px); } .btn-ghost { background: transparent; color: var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--bg); } .btn-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink); border-bottom: 1px solid var(--line-2); padding-bottom: 4px; transition: border-color .25s var(--ease), gap .3s var(--ease); } .btn-link:hover { border-color: var(--ink); gap: 14px; } /* ===== Placeholder imagery ===== */ .ph { position: relative; background: repeating-linear-gradient( 135deg, color-mix(in oklab, var(--ink) 4%, var(--bg-2)) 0 12px, color-mix(in oklab, var(--ink) 2%, var(--bg-2)) 12px 24px ); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; isolation: isolate; } /* Real-photo treatment: editorial desaturation + warm tint to keep the gallery cohesive */ .ph[data-img] { background-size: cover; background-position: center; background-repeat: no-repeat; background-image: var(--img); filter: saturate(0.78) contrast(1.04); } .ph[data-img]::before { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, color-mix(in oklab, var(--ink) 8%, transparent) 0%, transparent 35%, color-mix(in oklab, var(--ink) 14%, transparent) 100% ); mix-blend-mode: multiply; pointer-events: none; z-index: 0; } .ph[data-img]::after { z-index: 1; } .ph::after { content: attr(data-label); position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); background: var(--bg); border: 1px solid var(--line); padding: 5px 9px; border-radius: 2px; max-width: calc(100% - 28px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ph[data-tone="forest"] { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ink) 88%, var(--sage)) 0 12px, color-mix(in oklab, var(--ink) 92%, var(--sage)) 12px 24px); border-color: var(--ink); } .ph[data-tone="forest"]::after { background: var(--ink); color: var(--bg); border-color: var(--ink-2); } .ph[data-tone="sand"] { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--sand) 75%, var(--bg)) 0 12px, color-mix(in oklab, var(--sand) 60%, var(--bg)) 12px 24px); } .ph[data-tone="sage"] { background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--sage) 60%, var(--bg)) 0 12px, color-mix(in oklab, var(--sage) 45%, var(--bg)) 12px 24px); } /* Photo wins over data-tone stripes when both are present */ .ph[data-img][data-tone], .ph[data-img] { background-image: var(--img) !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-color: var(--bg-2); } /* ===== Footer ===== */ .footer { background: var(--ink); color: var(--bg); padding: 80px 0 36px; margin-top: 80px; } .footer .shell { color: inherit; } .footer h2 { color: var(--bg); font-size: clamp(40px, 6vw, 84px); margin-bottom: 56px; text-wrap: balance; } .footer .grid { display: grid; grid-template-columns: auto auto auto; justify-content: start; text-align: left; justify-items: start; gap: 96px; padding-top: 40px; border-top: 1px solid color-mix(in oklab, var(--bg) 18%, transparent); } .footer .col h4 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 60%, transparent); margin-bottom: 16px; font-weight: 400; } .footer a { display: block; padding: 4px 0; color: color-mix(in oklab, var(--bg) 80%, transparent); transition: color .2s; } .footer a:hover { color: var(--bg); } .footer .legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--bg) 14%, transparent); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in oklab, var(--bg) 50%, transparent); } /* ===== Reveal on scroll ===== */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .9s var(--ease), transform .9s var(--ease); } .reveal.in { opacity: 1; transform: none; } .reveal.delay-1 { transition-delay: .08s; } .reveal.delay-2 { transition-delay: .16s; } .reveal.delay-3 { transition-delay: .24s; } .reveal.delay-4 { transition-delay: .32s; } /* ===== Cards ===== */ .card { background: var(--paper); border: 1px solid var(--line); border-radius: 4px; padding: 32px; transition: transform .35s var(--ease), border-color .25s var(--ease); } .card:hover { transform: translateY(-2px); border-color: var(--line-2); } /* Number column */ .numcol { font-family: var(--serif); font-size: 36px; color: var(--sage); line-height: 1; } /* Quote-hero: large editorial pull-quote (one consistent size everywhere) */ .quote-hero { font-family: var(--serif); font-size: clamp(36px, 4.4vw, 60px); line-height: 1.18; letter-spacing: -0.015em; text-wrap: balance; } /* Stat-num: large number used in proof / stats blocks */ .stat-num { font-family: var(--serif); font-size: clamp(64px, 8vw, 112px); line-height: 1; letter-spacing: -0.02em; } /* Stat-num smaller — used in stat strips */ .stat-num--sm { font-family: var(--serif); font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.015em; } /* Display ornament — drop-cap quote / sparkle marks */ .ornament { font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--sand); } /* Step-title — used in process rail and form rails */ .step-title { font-family: var(--serif); font-size: 22px; line-height: 1.18; } /* Numbered ordinals (used in fit grid, system list) */ .ordinal { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1; color: var(--sage); } /* Marquee */ .marquee { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; background: var(--bg-2); } .marquee-track { display: flex; gap: 64px; white-space: nowrap; animation: marquee 60s linear infinite; font-family: var(--serif); font-size: 32px; color: var(--ink-2); } .marquee-track span { display: inline-flex; align-items: center; gap: 64px; } .marquee-track .star { font-style: normal; color: var(--sage); font-size: 18px; } @keyframes marquee { to { transform: translateX(-50%); } } /* Form */ .field { display: grid; gap: 8px; } .field label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .field input, .field textarea, .field select { font-family: var(--sans); font-size: 15px; padding: 14px 0; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--ink); outline: none; transition: border-color .2s var(--ease); } .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--ink); } .field textarea { resize: vertical; min-height: 80px; } /* Pill / chip */ .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; } .chip .bullet { width: 5px; height: 5px; border-radius: 50%; background: var(--sage); } /* Utilities */ .row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .stack { display: grid; gap: 16px; } .between { display: flex; justify-content: space-between; align-items: center; gap: 24px; } .muted { color: var(--muted); } .center { text-align: center; } .mono { font-family: var(--mono); letter-spacing: 0.06em; } .upper { text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; font-family: var(--mono); } @media (max-width: 880px) { .nav-links { display: none; } .footer .grid { grid-template-columns: 1fr 1fr; } .footer .legal { flex-direction: column; gap: 12px; } } /* ============================================================ MOBILE — collapse inline grids, scale type, tighten padding ============================================================ */ @media (max-width: 760px) { :root { --section-pad: 64px; --gutter: 20px; --h1: clamp(40px, 11vw, 56px); --h2: clamp(30px, 8vw, 44px); --h3: clamp(22px, 5.5vw, 26px); } /* Stack every inline grid to a single column */ #root div[style*="grid-template-columns"], #root section[style*="grid-template-columns"], #root form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 20px !important; } /* Hero photo strip — keep horizontal but shorter */ #top > .shell > .reveal.delay-3 { grid-template-columns: 1fr !important; height: auto !important; } #top > .shell > .reveal.delay-3 > .ph, #top > .shell > .reveal.delay-3 > div { height: 220px !important; } #top > .shell > .reveal.delay-3 > div[style*="grid-template-rows"] { display: grid !important; grid-template-columns: 1fr 1fr !important; grid-template-rows: none !important; } #top > .shell > .reveal.delay-3 > div[style*="grid-template-rows"] > .ph { height: 160px !important; } /* Stats row in hero — keep two columns */ #top > .shell > div > .reveal.delay-2 > div[style*="grid-template-columns"] { grid-template-columns: 1fr 1fr !important; } /* Services rows — keep ordinal + content stacked cleanly */ #services article[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 12px !important; padding: 28px 0 !important; } /* Owner-fit grid — keep numeric + body together */ #owners div[style*="grid-template-columns: \"60px"], #owners div[style*="grid-template-columns:60px"], #owners div[style*="grid-template-columns: 60px"] { grid-template-columns: 48px 1fr !important; padding: 24px !important; } /* Properties — 4-up suburb tiles → 2-up */ #properties div[style*="grid-template-columns: repeat(4"], #properties div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr 1fr !important; } /* Styling photo strip — 4-up → 2x2 */ section[style*="background: var(--bg-2)"] div[style*="grid-template-columns: \"1.2fr"] { grid-template-columns: 1fr 1fr !important; height: auto !important; } section div[style*="grid-template-columns"] > .ph { min-height: 180px; } /* Tighter section padding & type margins */ .section { padding-top: var(--section-pad); padding-bottom: var(--section-pad); } .quote-hero { font-size: clamp(28px, 7vw, 40px) !important; line-height: 1.15 !important; } .lede { font-size: 17px !important; } .body-lg { font-size: 16px !important; } /* Forms — pad less */ #contact form { padding: 24px !important; } /* Footer 4-col → 2-col already handled at 880, force 1-col on tiny screens */ } @media (max-width: 480px) { .footer .grid { grid-template-columns: 1fr !important; } #properties div[style*="grid-template-columns: repeat(4"], #properties div[style*="grid-template-columns:repeat(4"] { grid-template-columns: 1fr !important; } }