/* ============================================================ LOWHILL STUDIO — Editorial (Cassia-inspired, light & airy) ============================================================ */ :root{ --paper: #f4f0e8; /* warm cream */ --paper-2: #ece6db; /* alt band */ --paper-3: #e6dfd2; --ink: #201d18; /* warm near-black */ --ink-2: #4a443b; --muted: #8d8576; --faint: #b3ab9c; --line: rgba(32,29,24,.16); --line-soft:rgba(32,29,24,.09); --accent: #a07a52; /* warm clay (used sparingly) */ --display: "Marcellus", "Noto Serif KR", Georgia, serif; --kr: "Noto Serif KR", serif; --sans: "Jost", system-ui, -apple-system, sans-serif; --maxw: 1320px; --pad: clamp(20px, 5vw, 84px); --img-filter: none; } /* tone variants on */ html[data-paper="greige"]{ --paper:#ece7de; --paper-2:#e3ddd1; --paper-3:#dcd4c6; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ background:var(--paper); color:var(--ink); font-family:var(--sans); font-weight:300; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } ::selection{ background:var(--ink); color:var(--paper); } h1,h2,h3,h4,h5{ word-break:keep-all; } /* ---- type helpers ---- */ .eyebrow{ font-family:var(--sans); font-size:clamp(10px,1vw,12px); letter-spacing:.36em; text-transform:uppercase; color:var(--muted); font-weight:400; } .serif{ font-family:var(--display); } .kr{ font-family:var(--kr); } .rule{ height:1px; background:var(--line); border:0; margin:0; } .section{ padding:clamp(76px,11vw,160px) var(--pad); } .wrap{ max-width:var(--maxw); margin:0 auto; } .section-label{ display:flex; align-items:center; gap:18px; margin-bottom:clamp(30px,4vw,52px); } .section-label .ln{ flex:0 0 46px; height:1px; background:var(--ink); } .section-label span{ font-family:var(--sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--ink-2); } /* link with underline grow */ .link{ font-family:var(--sans); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink); display:inline-flex; align-items:center; gap:11px; padding-bottom:6px; position:relative; cursor:pointer; } .link::after{ content:""; position:absolute; left:0; bottom:0; width:100%; height:1px; background:var(--ink); transform:scaleX(1); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); } .link:hover::after{ transform:scaleX(0); transform-origin:right; } .link .ar{ transition:transform .45s cubic-bezier(.2,.7,.2,1); } .link:hover .ar{ transform:translateX(6px); } /* buttons */ .btn{ font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; padding:15px 30px; cursor:pointer; border:1px solid var(--ink); color:var(--ink); background:transparent; transition:background .4s, color .4s; } .btn:hover{ background:var(--ink); color:var(--paper); } .btn--solid{ background:var(--ink); color:var(--paper); } .btn--solid:hover{ background:transparent; color:var(--ink); } /* reveal */ [data-reveal]{ opacity:0; } /* ============================================================ TOP BAR ============================================================ */ .topbar{ position:fixed; inset:0 0 auto 0; z-index:60; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:22px var(--pad); transition:background .5s ease, padding .45s ease, box-shadow .5s ease; } .topbar.scrolled{ background:color-mix(in srgb, var(--paper) 90%, transparent); backdrop-filter:blur(12px) saturate(1.05); box-shadow:0 1px 0 var(--line-soft); padding-top:15px; padding-bottom:15px; } .topbar .left{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); } .topbar .left a:hover{ color:var(--accent); } .brand{ text-align:center; line-height:1; } .brand b{ font-family:var(--display); font-size:24px; letter-spacing:.26em; display:block; } .brand span{ font-family:var(--sans); font-size:9px; letter-spacing:.42em; text-transform:uppercase; color:var(--muted); margin-top:7px; display:block; } .topbar .right{ display:flex; justify-content:flex-end; align-items:center; gap:26px; } .topbar .right .nav-inline{ display:flex; gap:26px; } .topbar .right .nav-inline a{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-2); transition:color .3s; white-space:nowrap; } .topbar .right .nav-inline a:hover{ color:var(--ink); } .menu-btn{ display:inline-flex; flex-direction:column; gap:5px; cursor:pointer; background:none; border:0; padding:6px 0; } .menu-btn span{ display:block; width:26px; height:1.5px; background:var(--ink); transition:transform .4s, opacity .3s, background .5s; } /* light treatment while over the hero image (before scroll) */ .topbar:not(.scrolled) .brand b, .topbar:not(.scrolled) .brand span, .topbar:not(.scrolled) .nav-inline a{ color:#f4f0e8; } .topbar:not(.scrolled) .left a{ color:rgba(244,240,232,.82); } .topbar:not(.scrolled) .menu-btn span{ background:#f4f0e8; } /* ============================================================ FULLSCREEN OVERLAY MENU ============================================================ */ .overlay{ position:fixed; inset:0; z-index:70; background:var(--ink); color:var(--paper); display:grid; grid-template-columns:1.2fr 1fr; opacity:0; visibility:hidden; transition:opacity .6s ease, visibility .6s ease; } .overlay.open{ opacity:1; visibility:visible; } .overlay .ov-close{ position:absolute; top:24px; right:var(--pad); z-index:2; background:none; border:0; cursor:pointer; color:var(--paper); font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; display:flex; align-items:center; gap:10px; } .overlay .ov-close .x{ font-size:20px; line-height:1; } .overlay .ov-nav{ display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); gap:6px; } .overlay .ov-nav a{ font-family:var(--display); font-size:clamp(34px,5.2vw,68px); line-height:1.18; color:var(--paper); display:flex; align-items:baseline; gap:18px; transition:color .35s, padding-left .45s cubic-bezier(.2,.7,.2,1); } .overlay .ov-nav a .idx{ font-family:var(--sans); font-size:12px; letter-spacing:.2em; color:var(--faint); } .overlay .ov-nav a:hover{ color:var(--accent); padding-left:18px; } .overlay .ov-side{ position:relative; overflow:hidden; } .overlay .ov-side img{ width:100%; height:100%; object-fit:cover; filter:grayscale(.2); } .overlay .ov-meta{ position:absolute; left:var(--pad); bottom:40px; } .overlay .ov-meta p{ margin:0; font-family:var(--sans); font-size:12px; letter-spacing:.04em; line-height:1.9; color:rgba(244,240,232,.7); } .overlay .ov-meta b{ color:var(--paper); font-weight:400; } /* ============================================================ HERO SLIDER ============================================================ */ .hero{ position:relative; height:100svh; min-height:640px; overflow:hidden; background:var(--ink); } .slide{ position:absolute; inset:0; opacity:0; visibility:hidden; } .slide.active{ opacity:1; visibility:visible; } .slide .media{ position:absolute; inset:0; } .slide .media img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); } .slide .media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,17,13,.4) 0%, rgba(20,17,13,.05) 36%, rgba(20,17,13,.5) 100%); } .slide .caption{ position:absolute; left:0; right:0; bottom:clamp(78px,12vh,140px); padding:0 var(--pad); max-width:var(--maxw); margin:0 auto; color:#f4f0e8; } .slide .caption .meta{ font-family:var(--sans); font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:rgba(244,240,232,.82); margin-bottom:24px; display:flex; gap:16px; align-items:center; } .slide .caption .meta .dot{ width:4px; height:4px; border-radius:50%; background:currentColor; } .slide .caption h1{ font-family:var(--display); font-weight:400; font-size:clamp(44px,8vw,118px); line-height:.98; letter-spacing:.005em; margin:0; text-wrap:balance; } .slide .caption .sub{ font-family:var(--kr); font-weight:300; font-size:clamp(14px,1.5vw,18px); color:rgba(244,240,232,.86); margin:22px 0 30px; max-width:40ch; } .slide .caption .read{ color:#f4f0e8; white-space:nowrap; } .slide .caption .read::after{ background:#f4f0e8; } /* hero controls */ .hero-ui{ position:absolute; left:0; right:0; bottom:34px; padding:0 var(--pad); z-index:3; max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; justify-content:space-between; } .hero-dots{ display:flex; gap:14px; align-items:center; } .hero-dots button{ background:none; border:0; cursor:pointer; font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:rgba(244,240,232,.5); transition:color .35s; padding:6px 2px; position:relative; } .hero-dots button .bar{ display:inline-block; width:30px; height:1px; background:rgba(244,240,232,.4); margin-left:10px; vertical-align:middle; position:relative; overflow:hidden; } .hero-dots button .bar i{ position:absolute; inset:0; width:0; background:#f4f0e8; } .hero-dots button.on{ color:#f4f0e8; } .hero-arrows{ display:flex; gap:8px; } .hero-arrows button{ width:54px; height:54px; border:1px solid rgba(244,240,232,.4); background:none; cursor:pointer; color:#f4f0e8; display:flex; align-items:center; justify-content:center; transition:background .35s, color .35s, border-color .35s; } .hero-arrows button:hover{ background:#f4f0e8; color:var(--ink); border-color:#f4f0e8; } .hero-arrows svg{ width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.3; } /* ============================================================ STATEMENT ============================================================ */ .statement{ background:var(--paper); text-align:center; } .statement .wrap{ max-width:980px; } .statement p.big{ font-family:var(--display); font-weight:400; font-size:clamp(28px,4.4vw,58px); line-height:1.24; letter-spacing:.005em; margin:0; text-wrap:balance; } .statement p.big .clay{ color:var(--accent); } .statement .sig{ margin-top:40px; display:inline-flex; flex-direction:column; gap:8px; align-items:center; } .statement .sig .ln{ width:54px; height:1px; background:var(--ink); } .statement .sig span{ font-family:var(--sans); font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); } /* ============================================================ PORTFOLIO (editorial, info-below) ============================================================ */ .work{ background:var(--paper); } .work .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,70px); } .work .head h2{ font-family:var(--display); font-weight:400; font-size:clamp(34px,5vw,68px); line-height:1; margin:.3em 0 0; } .work .head p{ max-width:30ch; color:var(--ink-2); font-size:14px; margin:0; } .work-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(20px,2.6vw,40px) clamp(20px,2.4vw,34px); } .pcard{ display:block; cursor:pointer; } .pcard .frame{ position:relative; overflow:hidden; background:var(--paper-3); } .pcard .frame img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); transition:transform 1.4s cubic-bezier(.2,.7,.2,1); } .pcard:hover .frame img{ transform:scale(1.05); } .pcard .frame .num{ position:absolute; top:16px; left:18px; font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:#f4f0e8; mix-blend-mode:difference; } .pcard .info{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; padding-top:18px; border-top:1px solid var(--line); margin-top:18px; } .pcard .info h3{ font-family:var(--display); font-weight:400; font-size:clamp(20px,2vw,28px); margin:0; transition:color .35s; } .pcard:hover .info h3{ color:var(--accent); } .pcard .info .cat{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap; } .pcard .info .kr{ font-family:var(--kr); font-size:12px; color:var(--muted); display:block; margin-top:5px; letter-spacing:.04em; } /* spans & ratios */ .pcard.c5{ grid-column:span 5; } .pcard.c7{ grid-column:span 7; } .pcard.c6{ grid-column:span 6; } .pcard.c12{ grid-column:span 12; } .r-tall .frame{ aspect-ratio:4/5; } .r-land .frame{ aspect-ratio:3/2; } .r-wide .frame{ aspect-ratio:16/7; } .pcard.offset{ margin-top:clamp(40px,7vw,120px); } /* ============================================================ FEATURE (asymmetric — Film & DI) ============================================================ */ .feature{ background:var(--paper-2); } .feature .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,96px); align-items:center; } .feature .ph{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--paper-3); } .feature .ph img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); transition:transform 1.5s cubic-bezier(.2,.7,.2,1); } .feature .ph:hover img{ transform:scale(1.05); } .feature .ph .play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; border:1px solid rgba(244,240,232,.7); display:flex; align-items:center; justify-content:center; transition:background .4s, border-color .4s; } .feature .ph:hover .play{ background:#f4f0e8; border-color:#f4f0e8; } .feature .ph .play svg{ width:22px; height:22px; fill:#f4f0e8; transition:fill .4s; } .feature .ph:hover .play svg{ fill:var(--ink); } .feature .tx h2{ font-family:var(--display); font-weight:400; font-size:clamp(32px,4.6vw,62px); line-height:1.04; margin:.2em 0 0; } .feature .tx .lede{ color:var(--ink-2); font-size:clamp(14px,1.4vw,16.5px); line-height:1.95; margin:26px 0 0; max-width:42ch; } .feature .tx .lede .accent{ color:var(--accent); } .steps{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); margin:38px 0 36px; } .step{ background:var(--paper-2); padding:24px 22px; } .step .n{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; color:var(--accent); } .step h4{ font-family:var(--display); font-weight:400; font-size:21px; margin:12px 0 3px; } .step .kr{ font-family:var(--kr); font-size:12.5px; color:var(--muted); } /* ============================================================ CLIENTS ============================================================ */ .clients{ background:var(--paper); border-top:1px solid var(--line-soft); } .clients .wrap{ text-align:center; } .clients .lab{ font-family:var(--sans); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); margin-bottom:clamp(34px,4.5vw,52px); } .logos{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(30px,5vw,68px) clamp(24px,4vw,56px); align-items:center; justify-items:center; } .logos img{ height:clamp(34px,4vw,50px); width:auto; object-fit:contain; filter:grayscale(1) brightness(.35); opacity:.55; transition:opacity .4s, filter .4s; } .logos a:hover img{ opacity:.9; filter:grayscale(.2) brightness(.6); } /* ============================================================ JOURNAL (blog list) ============================================================ */ .journal{ background:var(--paper-2); } .journal .head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(40px,5vw,66px); } .journal .head h2{ font-family:var(--display); font-weight:400; font-size:clamp(32px,4.6vw,62px); line-height:1; margin:.3em 0 0; } .posts{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,3vw,46px); } .post .ph{ position:relative; overflow:hidden; aspect-ratio:4/5; background:var(--paper-3); margin-bottom:24px; } .post .ph img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); transition:transform 1.4s cubic-bezier(.2,.7,.2,1); } .post:hover .ph img{ transform:scale(1.05); } .post .pmeta{ font-family:var(--sans); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); display:flex; gap:14px; align-items:center; margin-bottom:14px; } .post .pmeta .dot{ width:3px; height:3px; border-radius:50%; background:var(--accent); } .post h3{ font-family:var(--display); font-weight:400; font-size:clamp(21px,2vw,27px); line-height:1.22; margin:0 0 16px; transition:color .35s; } .post:hover h3{ color:var(--accent); } /* ============================================================ INSTAGRAM ============================================================ */ .insta{ background:var(--paper); } .insta .top{ text-align:center; margin-bottom:clamp(30px,3.4vw,46px); } .insta .top .eyebrow{ display:block; margin-bottom:14px; } .insta .top h2{ font-family:var(--display); font-weight:400; font-size:clamp(26px,3vw,40px); margin:0; } .insta .top a{ color:var(--accent); } .ig{ display:grid; grid-template-columns:repeat(6,1fr); gap:6px; } .ig a{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-3); } .ig img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); transition:transform 1.1s cubic-bezier(.2,.7,.2,1); } .ig a:hover img{ transform:scale(1.09); } .ig a .g{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(32,29,24,.42); opacity:0; transition:opacity .4s; } .ig a:hover .g{ opacity:1; } .ig a .g svg{ width:22px; height:22px; stroke:#f4f0e8; fill:none; } /* ============================================================ NEWSLETTER ============================================================ */ .news{ background:var(--ink); color:var(--paper); text-align:center; } .news .eyebrow{ color:rgba(244,240,232,.6); } .news h2{ font-family:var(--display); font-weight:400; font-size:clamp(32px,5vw,70px); line-height:1.04; margin:18px 0 8px; } .news p{ color:rgba(244,240,232,.7); font-size:14.5px; max-width:46ch; margin:0 auto 40px; } .news form{ display:flex; max-width:540px; margin:0 auto; border-bottom:1px solid rgba(244,240,232,.4); } .news input{ flex:1; background:none; border:0; color:var(--paper); font-family:var(--sans); font-size:15px; letter-spacing:.02em; padding:16px 4px; outline:none; } .news input::placeholder{ color:rgba(244,240,232,.45); } .news button{ background:none; border:0; cursor:pointer; color:var(--paper); font-family:var(--sans); font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; padding:0 6px; transition:color .3s; } .news button:hover{ color:var(--accent); } /* ============================================================ FOOTER ============================================================ */ .foot{ background:var(--paper); } .foot-gallery{ display:grid; grid-template-columns:repeat(6,1fr); } .foot-gallery a{ position:relative; aspect-ratio:1; overflow:hidden; background:var(--paper-3); } .foot-gallery img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter) grayscale(.25); transition:transform 1.2s cubic-bezier(.2,.7,.2,1), filter .5s; } .foot-gallery a:hover img{ transform:scale(1.06); filter:var(--img-filter) grayscale(0); } .foot-main{ padding:clamp(64px,8vw,108px) var(--pad) 0; } .foot-cols{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(32px,5vw,64px); } .foot b.fb{ font-family:var(--display); font-size:30px; letter-spacing:.2em; display:block; } .foot .fkr{ font-family:var(--kr); color:var(--muted); font-size:13px; margin-top:12px; } .foot p.addr{ color:var(--ink-2); font-size:13.5px; line-height:1.95; margin:26px 0 0; max-width:30ch; } .foot h5{ font-family:var(--sans); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:6px 0 20px; } .foot ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; } .foot ul li{ color:var(--ink-2); font-size:13.5px; } .foot ul li a{ transition:color .3s; } .foot ul li a:hover{ color:var(--accent); } .foot .socs{ display:flex; gap:10px; margin-top:4px; } .foot .socs a{ width:40px; height:40px; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:.35s; } .foot .socs a:hover{ background:var(--ink); border-color:var(--ink); } .foot .socs svg{ width:15px; height:15px; fill:var(--ink-2); transition:fill .35s; } .foot .socs a:hover svg{ fill:var(--paper); } .foot-bottom{ margin-top:clamp(54px,7vw,90px); padding:26px 0 34px; border-top:1px solid var(--line-soft); display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; } .foot-bottom p{ font-family:var(--sans); font-size:11px; letter-spacing:.04em; color:var(--faint); margin:0; line-height:1.8; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .topbar .right .nav-inline{ display:none; } .ig{ grid-template-columns:repeat(4,1fr); } .foot-gallery{ grid-template-columns:repeat(3,1fr); } .foot-cols{ grid-template-columns:1fr 1fr; } .logos{ grid-template-columns:repeat(4,1fr); } } @media (max-width:860px){ .topbar{ grid-template-columns:auto 1fr auto; } .brand{ text-align:left; } .overlay{ grid-template-columns:1fr; } .overlay .ov-side{ display:none; } .feature .grid{ grid-template-columns:1fr; } .feature .ph{ aspect-ratio:3/2; } .posts{ grid-template-columns:1fr; gap:48px; } .work-grid .pcard{ grid-column:span 12 !important; } .pcard.offset{ margin-top:0; } } @media (max-width:560px){ :root{ --pad:20px; } .ig{ grid-template-columns:repeat(3,1fr); } .foot-cols{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .logos{ grid-template-columns:repeat(2,1fr); } .hero-arrows{ display:none; } }