/* ========================================================= The Coveted Car — shared stylesheet Design language carried over from the prototype: Fraunces (serif headings) + Inter (body), dark editorial, gold accent for Allocation Access, green for Marketplace. Zone accent is switched via ========================================================= */ :root{ --ink:#EDEAE1; --ink-dim:#A9A79E; --ink-faint:#77756D; --bg:#14161A; --bg-raised:#1A1D21; --bg-raised-2:#1F2226; --line:rgba(237,234,225,0.12); --line-strong:rgba(237,234,225,0.22); --access:#C9A15A; --access-dim:#8B7343; --market:#5C9678; --market-dim:#3E6B52; /* default accent — overridden per zone in the rules below */ --accent:var(--access); --accent-dim:var(--access-dim); --radius:2px; --maxw:1180px; } body[data-zone="market"]{ --accent:var(--market); --accent-dim:var(--market-dim); } body[data-zone="access"]{ --accent:var(--access); --accent-dim:var(--access-dim); } body[data-zone="neutral"]{ --accent:var(--access); --accent-dim:var(--access-dim); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{ margin:0; background:var(--bg); color:var(--ink); font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4,.serif{ font-family:'Fraunces',Georgia,'Times New Roman',serif; font-weight:500; letter-spacing:-0.01em; margin:0; } p{margin:0;} a{color:inherit;text-decoration:none;} button{font-family:inherit;cursor:pointer;} img{max-width:100%;display:block;} /* ---------- Layout helpers ---------- */ main{max-width:var(--maxw); margin:0 auto; padding:0 40px;} .wrap{max-width:var(--maxw); margin:0 auto; padding:0 40px;} .divider{border:0;border-top:1px solid var(--line);margin:0;} .eyebrow{ font-size:12px; color:var(--ink-faint); letter-spacing:0.04em; display:flex; align-items:center; gap:10px; text-transform:uppercase; } .eyebrow::before{content:''; width:16px; height:1px; background:var(--accent-dim); flex:none;} .btn{ display:inline-block; border:1px solid var(--line-strong); padding:13px 24px; font-size:13.5px; color:var(--ink); border-radius:var(--radius); transition:border-color .2s,color .2s,background .2s; } .btn:hover{border-color:var(--accent); color:var(--accent);} .btn-solid{ background:var(--accent); color:#14161A; border-color:var(--accent); font-weight:600; } .btn-solid:hover{background:#DBB671; color:#14161A;} body[data-zone="market"] .btn-solid:hover{background:var(--market-dim); color:var(--ink); border-color:var(--market-dim);} .link-go{ display:inline-block; font-size:13.5px; color:var(--accent); border-bottom:1px solid var(--accent-dim); padding-bottom:2px; } /* ---------- Nav ---------- */ .nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:20px 40px; background:rgba(20,22,26,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .wordmark{ font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:20px; letter-spacing:0.01em; white-space:nowrap; } .wordmark span{color:var(--accent); transition:color .3s;} .navlinks{display:flex; gap:30px; align-items:center;} .navlinks a{ color:var(--ink-dim); font-size:14px; padding:6px 0; position:relative; transition:color .2s; } .navlinks a:hover{color:var(--ink);} .navlinks a.active{color:var(--ink);} .navlinks a.active::after{ content:''; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:var(--accent); } .navcta{ border:1px solid var(--line-strong); padding:10px 20px; font-size:13px; color:var(--ink); border-radius:var(--radius); transition:border-color .2s,color .2s; } .navcta:hover{border-color:var(--accent); color:var(--accent);} .navtoggle{display:none; background:none; border:0; color:var(--ink); font-size:22px; line-height:1;} /* ---------- Sub-nav (per zone) ---------- */ .subnav{ border-bottom:1px solid var(--line); background:var(--bg); } .subnav .wrap{display:flex; gap:26px; align-items:center; overflow-x:auto;} .subnav a{ color:var(--ink-faint); font-size:13px; padding:14px 0; white-space:nowrap; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; } .subnav a:hover{color:var(--ink-dim);} .subnav a.active{color:var(--ink); border-color:var(--accent);} /* ---------- Page head ---------- */ .page-head{padding:70px 0 46px;} .page-head h1{font-size:clamp(30px,4vw,46px); margin-top:16px; max-width:680px; line-height:1.08;} .page-head .sub{margin-top:18px; max-width:560px; color:var(--ink-dim); font-size:15.5px;} /* ---------- Home hero ---------- */ .home-hero{padding:88px 0 70px;} .home-hero h1{font-size:clamp(38px,5.4vw,64px); line-height:1.04; max-width:840px; margin-top:20px;} .home-hero .sub{max-width:540px; margin-top:22px; color:var(--ink-dim); font-size:16.5px;} .home-hero .actions{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap;} /* ---------- Split panels ---------- */ .split{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px; } .split-panel{background:var(--bg); padding:38px 34px; position:relative; transition:background .25s;} .split-panel:hover{background:var(--bg-raised);} .split-panel .tag{font-size:12px; color:var(--panel-accent); letter-spacing:0.03em; margin-bottom:16px; display:block; text-transform:uppercase;} .split-panel h3{font-size:26px; margin-bottom:12px;} .split-panel p{color:var(--ink-dim); font-size:14.5px; max-width:380px;} .split-panel .go{ display:inline-block; margin-top:22px; font-size:13.5px; color:var(--panel-accent); border-bottom:1px solid var(--panel-accent-dim); padding-bottom:2px; } .split-panel.left{--panel-accent:var(--access); --panel-accent-dim:var(--access-dim);} .split-panel.right{--panel-accent:var(--market); --panel-accent-dim:var(--market-dim);} .split-panel .corner{position:absolute; top:20px; right:24px; font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;} /* ---------- Stat strip ---------- */ .strip{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:80px;} .strip div{padding:26px 28px; border-right:1px solid var(--line);} .strip div:last-child{border-right:none;} .strip .num{font-family:'Fraunces',serif; font-size:28px; color:var(--ink);} .strip .lbl{font-size:12.5px; color:var(--ink-faint); margin-top:6px;} /* ---------- Generic note block ---------- */ .note-foot{padding:64px 0 90px; border-top:1px solid var(--line); margin-top:70px;} .note-foot p{color:var(--ink-dim); max-width:520px; font-size:14.5px; margin-top:14px;} /* ---------- Steps ---------- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); margin:50px 0 70px; border-top:1px solid var(--line);} .step{padding:26px 26px 30px; border-right:1px solid var(--line); position:relative;} .step:last-child{border-right:none;} .step .plate{ font-family:'Fraunces',serif; font-size:14px; color:var(--accent); border:1px solid var(--accent-dim); display:inline-block; padding:3px 9px; border-radius:var(--radius); margin-bottom:18px; } .step h4{font-size:17px; font-weight:600; font-family:'Inter',sans-serif; margin-bottom:8px;} .step p{font-size:13.5px; color:var(--ink-dim);} /* ---------- Chips ---------- */ .models{display:flex; flex-wrap:wrap; gap:10px; margin:24px 0 70px;} .chip{border:1px solid var(--line-strong); padding:9px 16px; font-size:13px; color:var(--ink-dim); border-radius:20px;} /* ---------- Editorial model cards ---------- */ .model-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:36px 0 70px;} .model-card{background:var(--bg); padding:28px; transition:background .2s;} .model-card:hover{background:var(--bg-raised);} .model-card .mk{font-size:11px; color:var(--ink-faint); letter-spacing:0.04em; text-transform:uppercase;} .model-card h3{font-size:21px; margin:10px 0 10px;} .model-card p{font-size:13.5px; color:var(--ink-dim);} .model-card .attrs{display:flex; gap:16px; flex-wrap:wrap; margin-top:16px; font-size:12px; color:var(--ink-faint);} /* ---------- Forms ---------- */ .form-wrap{border:1px solid var(--line); padding:44px; margin:20px 0 90px; background:var(--bg-raised);} .form-wrap .eyebrow{margin-bottom:14px;} .form-wrap h2{font-size:24px; margin-bottom:6px;} .form-wrap .fsub{color:var(--ink-dim); font-size:14px; margin-bottom:34px; display:block;} .frow{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-bottom:22px;} .field{display:flex; flex-direction:column; gap:8px;} .field.full{grid-column:1/-1;} .field label{font-size:12.5px; color:var(--ink-faint);} .field input,.field select,.field textarea{ background:var(--bg); border:1px solid var(--line-strong); color:var(--ink); padding:12px 14px; font-family:inherit; font-size:14px; border-radius:var(--radius); width:100%; } .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--accent);} .covenant{display:flex; gap:12px; align-items:flex-start; margin:8px 0 30px; font-size:13px; color:var(--ink-dim);} .covenant input{margin-top:3px;} .submit-btn{background:var(--accent); color:#14161A; border:none; padding:14px 30px; font-size:14px; font-weight:600; border-radius:var(--radius);} .submit-btn:hover{background:#DBB671;} body[data-zone="market"] .submit-btn:hover{background:var(--market-dim); color:var(--ink);} .confirm{display:none; border:1px solid var(--accent-dim); padding:20px 24px; margin-top:24px; font-size:14px; color:var(--ink-dim);} .confirm.show{display:block;} .confirm strong{color:var(--ink); display:block; margin-bottom:6px; font-family:'Fraunces',serif; font-size:16px; font-weight:500;} /* ---------- Marketplace lots ---------- */ .lots{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:44px;} .lot{background:var(--bg); padding:26px; position:relative; display:block; transition:background .2s;} .lot:hover{background:var(--bg-raised);} .lot .platefig{position:absolute; top:22px; right:24px; font-size:11px; color:var(--ink-faint); font-variant-numeric:tabular-nums;} .lot .lotimg{height:150px; border:1px solid var(--line); margin-bottom:18px; display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:12px; letter-spacing:0.03em; text-align:center; padding:10px; background:var(--bg-raised-2);} .lot h3{font-family:'Fraunces',serif; font-size:19px; font-weight:500; margin-bottom:6px;} .lot .meta{font-size:12.5px; color:var(--ink-faint); margin-bottom:16px;} .lot .bidrow{display:flex; justify-content:space-between; align-items:flex-end; border-top:1px solid var(--line); padding-top:14px;} .lot .bidrow .b{font-size:11px; color:var(--ink-faint);} .lot .bidrow .bv{font-family:'Fraunces',serif; font-size:20px; color:var(--market);} .lot .timeleft{font-size:11px; color:var(--market); font-variant-numeric:tabular-nums;} /* ---------- Marketplace featured / listing ---------- */ .featured{margin-top:20px; border:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr;} .featured .imgcol{background:var(--bg-raised); display:flex; align-items:center; justify-content:center; color:var(--ink-faint); font-size:13px; border-right:1px solid var(--line); min-height:420px; text-align:center; padding:20px;} .featured .infocol{padding:40px;} .featured .fk{font-size:12px; color:var(--market); letter-spacing:0.03em;} .featured h1{font-size:28px; margin:14px 0 20px; line-height:1.1;} .specs{display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; margin-bottom:28px;} .specs div{border-top:1px solid var(--line); padding-top:10px;} .specs .k{font-size:11px; color:var(--ink-faint);} .specs .v{font-size:14px; margin-top:4px;} .vinshield{display:inline-block; font-size:10px; color:var(--market); border:1px solid var(--market-dim); padding:2px 7px; border-radius:20px; margin-left:8px; letter-spacing:0.02em; vertical-align:middle;} .vinnote{font-size:12.5px; color:var(--ink-dim); border:1px solid var(--line); background:var(--bg-raised); padding:14px 16px; margin-bottom:22px;} .vinnote strong{color:var(--ink); font-weight:600;} .bidbox{display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line-strong); padding:22px 24px; margin-bottom:22px;} .bidbox .cur .k{font-size:11px; color:var(--ink-faint);} .bidbox .cur .v{font-family:'Fraunces',serif; font-size:30px; color:var(--market); margin-top:4px;} .bidbox .countdown{text-align:right;} .bidbox .countdown .k{font-size:11px; color:var(--ink-faint);} .bidbox .countdown .v{font-size:18px; font-variant-numeric:tabular-nums; margin-top:4px;} .bidactions{display:flex; gap:12px;} .bidbtn{flex:1; background:var(--market); color:#0F1512; border:none; padding:14px; font-size:14px; font-weight:600; border-radius:var(--radius);} .bidbtn:hover{background:var(--market-dim); color:var(--ink);} .watchbtn{border:1px solid var(--line-strong); background:none; color:var(--ink-dim); padding:14px 20px; border-radius:var(--radius);} .bidfeedback{display:none; margin-top:14px; font-size:13px; color:var(--market);} .bidfeedback.show{display:block;} .bidhistory{margin:60px 0 90px;} .bidhistory h2{font-size:20px; margin-bottom:18px;} .bidhistory table{width:100%; border-collapse:collapse; font-size:13px;} .bidhistory th{text-align:left; color:var(--ink-faint); font-weight:500; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; padding:10px 12px; border-bottom:1px solid var(--line);} .bidhistory td{padding:12px; border-bottom:1px solid var(--line); color:var(--ink-dim); font-variant-numeric:tabular-nums;} /* ---------- Two-column feature rows ---------- */ .feature-row{display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:56px 0; border-top:1px solid var(--line); align-items:start;} .feature-row h2{font-size:24px; margin-bottom:14px;} .feature-row p{color:var(--ink-dim); font-size:14.5px; margin-bottom:12px;} .feature-row ul{margin:0; padding-left:18px; color:var(--ink-dim); font-size:14px;} .feature-row li{margin-bottom:8px;} /* ---------- Cards grid (generic) ---------- */ .cardgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin:40px 0 70px;} .cardgrid .card{background:var(--bg); padding:28px;} .cardgrid .card h3{font-size:18px; margin-bottom:10px;} .cardgrid .card p{font-size:13.5px; color:var(--ink-dim);} /* ---------- Gated / dashboard mock ---------- */ .gate{border:1px solid var(--line); background:var(--bg-raised); padding:40px; margin:40px 0 90px; text-align:center;} .gate h2{font-size:22px; margin-bottom:10px;} .gate p{color:var(--ink-dim); font-size:14px; max-width:440px; margin:0 auto 22px;} .dash{display:grid; grid-template-columns:240px 1fr; gap:1px; background:var(--line); border:1px solid var(--line); margin:40px 0 90px;} .dash aside{background:var(--bg); padding:26px;} .dash aside a{display:block; color:var(--ink-dim); font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--line);} .dash aside a.active{color:var(--ink);} .dash .dmain{background:var(--bg); padding:34px;} .dash .dmain h2{font-size:20px; margin-bottom:6px;} .dash .dmain .dsub{color:var(--ink-faint); font-size:13px; margin-bottom:26px;} .matchrow{display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-bottom:1px solid var(--line); font-size:13.5px;} .matchrow .status{font-size:11px; color:var(--accent); border:1px solid var(--accent-dim); padding:3px 9px; border-radius:20px;} /* ---------- FAQ / accordion-ish ---------- */ .qa{border-top:1px solid var(--line); padding:24px 0;} .qa h3{font-size:16px; font-family:'Inter',sans-serif; font-weight:600; margin-bottom:8px;} .qa p{color:var(--ink-dim); font-size:14px;} /* ---------- Footer ---------- */ .site-footer{border-top:1px solid var(--line); margin-top:0;} .site-footer .wrap{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:30px; padding:56px 40px 40px;} .site-footer .fcol h4{font-family:'Inter',sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); margin-bottom:14px; font-weight:600;} .site-footer .fcol a{display:block; color:var(--ink-dim); font-size:13.5px; padding:5px 0;} .site-footer .fcol a:hover{color:var(--ink);} .site-footer .brandcol .wordmark{font-size:18px; margin-bottom:12px;} .site-footer .brandcol p{color:var(--ink-faint); font-size:13px; max-width:280px;} .site-footer .legal{border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:20px 40px; color:var(--ink-faint); font-size:12px; max-width:var(--maxw); margin:0 auto;} /* ---------- Responsive ---------- */ @media(max-width:900px){ .site-footer .wrap{grid-template-columns:1fr 1fr;} .feature-row{grid-template-columns:1fr; gap:20px;} .cardgrid{grid-template-columns:1fr;} .dash{grid-template-columns:1fr;} } @media(max-width:760px){ .nav{padding:16px 20px;} .navlinks{ display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; background:var(--bg); border-bottom:1px solid var(--line); padding:8px 20px 16px; } .nav.open .navlinks{display:flex;} .navlinks a{padding:12px 0; border-bottom:1px solid var(--line); width:100%;} .navlinks a.active::after{display:none;} .navtoggle{display:block;} .navcta{display:none;} main,.wrap{padding:0 20px;} .split,.lots,.featured,.model-grid,.strip{grid-template-columns:1fr;} .featured .imgcol{border-right:none; border-bottom:1px solid var(--line); min-height:240px;} .strip div{border-right:none; border-bottom:1px solid var(--line);} .steps{grid-template-columns:1fr;} .step{border-right:none; border-bottom:1px solid var(--line);} .frow{grid-template-columns:1fr;} .specs{grid-template-columns:1fr;} .bidbox{flex-direction:column; gap:16px; align-items:flex-start;} .bidbox .countdown{text-align:left;} .site-footer .wrap{grid-template-columns:1fr;} .site-footer .legal{flex-direction:column; gap:8px;} }