/* ============================================================ TAT Interior Design — light & airy landing page Three toggleable directions via [data-direction] on ============================================================ */ :root { /* default = white / neutral */ --bg: #FFFFFF; --bg-alt: #F6F6F4; --surface: #FFFFFF; --ink: #2B2A26; --ink-soft: #4A4A48; --line: #E7E5E0; --accent: #7C8AA0; /* slate blue */ --accent-2: #B79B7E; /* warm sand */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-sans: 'Jost', system-ui, sans-serif; --tracking-label: 0.30em; --radius-img: 3px; --display-weight: 500; --hero-align: center; } html[data-direction="editorial"] { --bg: #FBF8F2; --bg-alt: #F1EADF; --surface: #FFFFFF; --ink: #23211C; --ink-soft: #6B6456; --line: #E4DBCC; --accent: #C0744B; /* terracotta */ --accent-2: #9A8C76; --font-display: 'Bodoni Moda', Georgia, serif; --font-sans: 'Hanken Grotesk', system-ui, sans-serif; --tracking-label: 0.22em; --radius-img: 0px; --display-weight: 500; --hero-align: left; } html[data-direction="luxe"] { --bg: #ECE7DD; --bg-alt: #E3DBCE; --surface: #F4F0E8; --ink: #322E28; --ink-soft: #6F675B; --line: #D6CDBD; --accent: #8A8264; /* olive taupe */ --accent-2: #A99B89; --font-display: 'Italiana', Georgia, serif; --font-sans: 'Mulish', system-ui, sans-serif; --tracking-label: 0.36em; --radius-img: 0px; --display-weight: 400; --hero-align: center; } /* ---------- reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-weight: 300; font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .5s ease, color .5s ease; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); margin: 0; line-height: 1.02; letter-spacing: -0.01em; } .wrap { width: min(1280px, 92vw); margin-inline: auto; } .label { font-family: var(--font-sans); font-weight: 400; font-size: 12px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-soft); } /* staggered reveal */ .reveal { opacity: 0; transform: translateY(38px); transition: opacity .95s cubic-bezier(.22,.61,.18,1), transform 1.05s cubic-bezier(.22,.61,.18,1); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none;} } /* ============================================================ Header ============================================================ */ .site-header { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 56px); transition: background .4s ease, padding .4s ease, border-color .4s ease; border-bottom: 1px solid transparent; } .site-header.scrolled { background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding-top: 16px; padding-bottom: 16px; } .brand { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 26px; letter-spacing: 0.42em; padding-left: 0.42em; } .brand .dot { color: var(--accent); } .nav { display: flex; align-items: center; gap: clamp(20px, 3vw, 44px); } .nav a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; color: var(--ink); position: relative; } .nav a::after { content:""; position:absolute; left:0; bottom:-6px; height:1px; width:0; background: var(--accent); transition: width .35s ease; } .nav a:hover::after { width: 100%; } .nav .nav-cta { border: 1px solid var(--ink); border-radius: 100px; padding: 9px 20px; letter-spacing: 0.14em; transition: background .3s ease, color .3s ease; white-space: nowrap; } .nav .nav-cta::after { display:none; } .nav .nav-cta:hover { background: var(--ink); color: var(--bg); } @media (max-width: 720px){ .nav a:not(.nav-cta){ display:none; } } /* ============================================================ Hero ============================================================ */ .hero { padding: 168px 0 clamp(48px, 7vw, 96px); text-align: var(--hero-align); } .hero .wrap { display: flex; flex-direction: column; align-items: var(--hero-align, center); } html[data-direction="editorial"] .hero .wrap { align-items: flex-start; } .hero .eyebrow { margin-bottom: 26px; } .hero h1 { font-size: clamp(52px, 9.5vw, 138px); letter-spacing: -0.02em; max-width: 16ch; } .hero h1 em { font-style: italic; color: var(--accent); } .hero .sub { margin-top: 30px; max-width: 52ch; font-size: 19px; color: var(--ink-soft); margin-inline: var(--hero-sub-mi, auto); } html[data-direction="editorial"] .hero .sub { margin-inline: 0; } .hero-actions { margin-top: 40px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: var(--hero-align); } html[data-direction="editorial"] .hero-actions { justify-content: flex-start; } .btn { font-family: var(--font-sans); font-weight: 400; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; padding: 15px 30px; border-radius: 100px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg); transition: all .3s ease; } .btn:hover { background: transparent; color: var(--ink); } .btn.ghost { background: transparent; color: var(--ink); } .btn.ghost:hover { background: var(--ink); color: var(--bg); } .hero-image { margin-top: clamp(56px, 7vw, 96px); width: 100%; } .hero-image image-slot { width: 100%; height: clamp(360px, 56vw, 720px); } /* ============================================================ Marquee / values strip ============================================================ */ .strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(70px,8vw,120px); overflow: hidden; } .strip-track { display: flex; gap: 56px; padding: 22px 0; white-space: nowrap; width: max-content; animation: marquee 38s linear infinite; } .strip-track span { font-family: var(--font-display); font-style: italic; font-size: clamp(22px,3vw,34px); color: var(--ink); display:inline-flex; align-items:center; gap:56px; } .strip-track span::after { content:"\00B7"; font-style: normal; font-size: 28px; line-height: 0; color: var(--accent); } @keyframes marquee { to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce){ .strip-track{ animation: none; } } /* ============================================================ Section scaffolding ============================================================ */ section { padding: clamp(80px, 11vw, 168px) 0; } .sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(44px,6vw,80px); } .sec-head .num { font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--accent); } .sec-title { font-size: clamp(34px, 5.5vw, 76px); max-width: 16ch; } .sec-title em { font-style: italic; color: var(--accent); } /* ---------- About ---------- */ .about { background: var(--bg-alt); transition: background .5s ease; } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px) clamp(40px, 6vw, 96px); align-items: start; } @media (max-width: 880px){ .about-grid { grid-template-columns: 1fr; } } .about-body p { color: var(--ink-soft); margin: 0 0 22px; max-width: 48ch; text-align: justify; text-justify: inter-word; hyphens: auto; } .about-body { grid-column: 2 / -1; } .about-grid .lead { grid-column: 1 / 2; font-family: var(--font-display); font-style: italic; font-size: clamp(28px,3.2vw,42px); line-height: 1.26; color: var(--ink); margin: 0; } @media (max-width: 880px){ .about-body, .about-grid .lead { grid-column: 1 / -1; } } .founders { display: flex; gap: clamp(28px,5vw,64px); margin-top: clamp(56px,7vw,104px); flex-wrap: wrap; } .founder { text-align: left; flex: 1 1 240px; max-width: 360px; } .founder image-slot { width: 100%; aspect-ratio: 4/5; } .founder .f-name { font-family: var(--font-display); font-size: 26px; margin-top: 18px; } .founder .f-role { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; } /* ---------- Services ---------- */ .service { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(36px,5vw,80px); align-items: center; padding: clamp(40px,5vw,72px) 0; border-top: 1px solid var(--line); } .service:last-child { border-bottom: 1px solid var(--line); } .service.flip { grid-template-columns: 1.1fr 0.9fr; } .service.flip .service-media { order: -1; } .service.solo { grid-template-columns: 1fr; } .service.solo .service-text { max-width: 60ch; } @media (max-width: 880px){ .service, .service.flip { grid-template-columns: 1fr; } .service.flip .service-media{ order: 0; } } .service-media image-slot { width: 100%; aspect-ratio: 5/4; } .service-index { font-family: var(--font-display); font-style: italic; font-size: 20px; color: var(--accent); margin-bottom: 18px; } .service h3 { font-size: clamp(30px,4vw,52px); margin-bottom: 22px; } .service p { color: var(--ink-soft); max-width: 46ch; margin: 0 0 26px; } .service ul { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; } .service li { display: flex; align-items: baseline; gap: 14px; font-size: 15px; } .service li::before { content:""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; transform: translateY(-2px); } .service .more { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; border-bottom: 1px solid var(--ink); padding-bottom: 4px; transition: gap .3s ease; } .service .more:hover { gap: 18px; } /* ---------- full-bleed band ---------- */ .band { padding: 0; } .band image-slot { width: 100%; height: clamp(320px, 44vw, 600px); } .band-quote { position: relative; } .band-quote .q { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 24px; } .band-quote .q blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(26px,4vw,56px); color: #fff; max-width: 20ch; margin: 0; text-shadow: 0 2px 30px rgba(0,0,0,.35); line-height: 1.15; } .band-quote .scrim { position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.34)); pointer-events:none; } /* ---------- Contact ---------- */ .contact { background: var(--bg-alt); transition: background .5s ease; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px,6vw,90px); } @media (max-width: 880px){ .contact-grid { grid-template-columns: 1fr; } } .contact h2 { font-size: clamp(38px,6vw,84px); margin-bottom: 26px; } .contact h2 em { font-style: italic; color: var(--accent); } .contact .intro { color: var(--ink-soft); max-width: 40ch; margin-bottom: 40px; } .contact-detail { margin-bottom: 26px; } .contact-detail .k { font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 6px; } .contact-detail .v { font-family: var(--font-display); font-size: 22px; } .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .field label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } .field input, .field textarea, .field select { font-family: var(--font-sans); font-size: 16px; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 12px 2px; outline: none; transition: border-color .3s ease; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); } .field textarea { resize: vertical; min-height: 90px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 560px){ .form-row { grid-template-columns: 1fr; } } .form-note { font-size: 13px; color: var(--ink-soft); margin-top: 8px; } .form-success { font-family: var(--font-display); font-style: italic; font-size: 24px; color: var(--accent); padding: 20px 0; } /* ============================================================ Footer ============================================================ */ .site-footer { background: var(--ink); color: var(--bg); padding: clamp(60px,8vw,110px) 0 40px; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; padding-bottom: 60px; border-bottom: 1px solid color-mix(in srgb, var(--bg) 24%, transparent); } .footer-brand { font-family: var(--font-display); font-size: clamp(56px,10vw,140px); letter-spacing: 0.3em; padding-left: 0.3em; line-height: 1; } .footer-tag { font-family: var(--font-display); font-style: italic; font-size: clamp(22px,3vw,34px); color: color-mix(in srgb, var(--bg) 80%, transparent); } .footer-cols { display: flex; gap: clamp(40px,7vw,110px); flex-wrap: wrap; } .footer-col h4 { font-family: var(--font-sans); font-weight: 400; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 55%, transparent); margin: 0 0 16px; } .footer-col a, .footer-col p { display: block; color: color-mix(in srgb, var(--bg) 86%, transparent); margin: 0 0 10px; font-size: 15px; } .footer-col a:hover { color: var(--accent); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 32px; font-size: 12px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--bg) 50%, transparent); } /* ---------- soft grain on photos ---------- */ image-slot { position: relative; } html.with-grain image-slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: multiply; border-radius: inherit; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"); }