/* thepicketts.net design system Palette carried from benpickett.com so the family site reads as Ben's. Light and dark are both first-class; the toggle sets data-theme on . */ :root{ --navy:#16233B; --navy-2:#1E3050; --navy-3:#2A3F66; --amber:#8A6416; --amber-lt:#E6C978; --amber-xlt:#FBF6E7; --sage:#7E93B5; --sage-lt:#EDF1F6; --flame:#B5450F; --bg:#FFFFFF; --bg-2:#F4F6FA; --surface:#FFFFFF; --text:#16233B; --text-2:#374151; --muted:#6B7280; --line:#E1E7F0; --line-2:#C8D3E2; --accent:var(--amber); --on-dark:#FFFFFF; --shadow-1:0 2px 8px rgba(22,35,59,.06); --shadow-2:0 18px 44px rgba(22,35,59,.14); --radius:16px; --font:'Manrope',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif; --shell:1120px; --ease:cubic-bezier(.22,.61,.36,1); } :root[data-theme="dark"]{ --bg:#0E1729; --bg-2:#131F36; --surface:#16233B; --text:#F2F5FA; --text-2:#C7D1E0; --muted:#93A2B8; --line:#26364F; --line-2:#33465F; --accent:var(--amber-lt); --sage-lt:#1B2A44; --shadow-1:0 2px 8px rgba(0,0,0,.35); --shadow-2:0 18px 44px rgba(0,0,0,.5); } @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --bg:#0E1729; --bg-2:#131F36; --surface:#16233B; --text:#F2F5FA; --text-2:#C7D1E0; --muted:#93A2B8; --line:#26364F; --line-2:#33465F; --accent:var(--amber-lt); --sage-lt:#1B2A44; --shadow-1:0 2px 8px rgba(0,0,0,.35); --shadow-2:0 18px 44px rgba(0,0,0,.5); } } *,*::before,*::after{box-sizing:border-box;margin:0;} html{scroll-behavior:smooth; scroll-padding-top:84px;} body{ font-family:var(--font); color:var(--text); background:var(--bg); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%; height:auto; display:block;} a{color:inherit; text-decoration:none;} :focus-visible{outline:3px solid var(--accent); outline-offset:3px; border-radius:4px;} .shell{max-width:var(--shell); margin:0 auto; padding:0 24px;} .skip{position:absolute; left:-9999px; top:0; background:var(--navy); color:#fff; padding:12px 18px; z-index:200; font-weight:700;} .skip:focus{left:12px; top:12px;} /* ---------------- nav ---------------- */ .nav{position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--navy) 92%,transparent); backdrop-filter:saturate(1.4) blur(14px); border-bottom:1px solid rgba(255,255,255,.08);} .nav .shell{display:flex; align-items:center; gap:22px; height:66px;} .nav .brand{font-weight:800; font-size:14.5px; color:#fff; text-transform:uppercase; letter-spacing:.16em;} .nav .brand em{font-style:normal; color:var(--amber-lt);} .nav .links{margin-left:auto; display:flex; align-items:center; gap:24px;} .nav .links a{color:rgba(255,255,255,.86); font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.14em; padding:6px 0; border-bottom:2px solid transparent; transition:color .18s var(--ease), border-color .18s var(--ease);} .nav .links a:hover{color:#fff; border-color:var(--amber-lt);} .nav .links a[aria-current="true"]{color:var(--amber-lt); border-color:var(--amber-lt);} .themetoggle{flex:0 0 auto; background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; width:38px; height:38px; border-radius:50%; cursor:pointer; display:grid; place-items:center; transition:background .18s var(--ease), border-color .18s var(--ease);} .themetoggle:hover{background:rgba(255,255,255,.12); border-color:var(--amber-lt);} .themetoggle svg{width:18px; height:18px;} .themetoggle .moon{display:none;} :root[data-theme="dark"] .themetoggle .moon{display:block;} :root[data-theme="dark"] .themetoggle .sun{display:none;} .progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:linear-gradient(90deg,var(--amber-lt),#fff); transition:width .1s linear;} .navtoggle{display:none; background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff; width:38px; height:38px; border-radius:10px; cursor:pointer; place-items:center; margin-left:auto;} .navtoggle svg{width:20px; height:20px;} .navtoggle[aria-expanded="true"] .bars{display:none;} .navtoggle .close{display:none;} .navtoggle[aria-expanded="true"] .close{display:block;} /* Below 700px the links become a panel under the bar. A row of links plus the theme toggle overflowed a 320px viewport, so they get their own space. */ @media (max-width:700px){ .navtoggle{display:grid;} .nav .shell{gap:12px;} .nav .links{ position:absolute; left:0; right:0; top:66px; margin:0; flex-direction:column; align-items:stretch; gap:0; background:var(--navy); border-bottom:1px solid rgba(255,255,255,.12); padding:8px 24px 18px; display:none; box-shadow:0 18px 30px rgba(0,0,0,.28); } .nav .links[data-open="true"]{display:flex;} .nav .links a{font-size:14px; letter-spacing:.12em; padding:14px 0; border-bottom:1px solid rgba(255,255,255,.10);} .nav .links a[aria-current="true"]{border-bottom-color:var(--amber-lt);} .nav .links a.hide-sm{display:block;} } /* ---------------- hero ---------------- */ .hero{position:relative; background:var(--navy); overflow:hidden; isolation:isolate;} .hero picture,.hero img.bg{position:absolute; inset:0; width:100%; height:100%;} .hero img.bg{object-fit:cover; object-position:center 45%; animation:kenburns 26s var(--ease) infinite alternate;} @keyframes kenburns{from{transform:scale(1.02) translateY(0);} to{transform:scale(1.12) translateY(-1.5%);}} .hero .scrim{position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(22,35,59,.34) 0%,rgba(22,35,59,.58) 55%,rgba(14,23,41,.94) 100%);} .hero .inner{position:relative; z-index:2; padding:120px 0 96px; color:#fff;} .eyebrow{display:inline-block; color:var(--amber-lt); font-size:11.5px; font-weight:800; text-transform:uppercase; letter-spacing:.26em; padding-bottom:10px; border-bottom:2px solid var(--amber-lt);} .hero h1{font-size:clamp(50px,10.5vw,116px); line-height:.88; font-weight:800; letter-spacing:-.035em; margin:22px 0 0; text-transform:uppercase;} .hero h1 em{font-style:normal; color:var(--amber-lt);} .hero .lede{font-size:clamp(17px,2.1vw,21px); color:rgba(255,255,255,.9); max-width:620px; margin:24px 0 0; font-weight:500;} .hero .cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:34px;} .hero .caption{position:relative; z-index:2; color:rgba(255,255,255,.52); font-size:12px; padding-bottom:20px;} .scrollcue{position:absolute; z-index:2; left:50%; bottom:16px; transform:translateX(-50%); color:rgba(255,255,255,.6); font-size:11px; letter-spacing:.2em; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite;} @keyframes bob{0%,100%{transform:translate(-50%,0);} 50%{transform:translate(-50%,6px);}} /* ---------------- buttons ---------------- */ .btn{display:inline-flex; align-items:center; gap:10px; font-weight:800; font-size:13.5px; text-transform:uppercase; letter-spacing:.12em; padding:15px 26px; border-radius:10px; transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); border:2px solid transparent; cursor:pointer;} .btn-amber{background:linear-gradient(180deg,#E6C978,#C9A64B); color:#3A2C06; box-shadow:0 8px 20px rgba(230,201,120,.28);} .btn-amber:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(230,201,120,.36);} .btn-ghost{border-color:rgba(255,255,255,.4); color:#fff;} .btn-ghost:hover{transform:translateY(-3px); border-color:#fff; background:rgba(255,255,255,.1);} .btn .ar{transition:transform .18s var(--ease);} .btn:hover .ar{transform:translateX(4px);} /* ---------------- credential strip ---------------- */ .strip{background:var(--navy-2); color:#fff;} .strip .shell{display:flex; flex-wrap:wrap; gap:10px 40px; padding:18px 24px; font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.16em;} .strip span{display:inline-flex; align-items:center; gap:12px;} .strip span:not(:last-child)::after{content:'/'; color:var(--amber-lt);} /* ---------------- sections ---------------- */ section{padding:88px 0;} .sec-head{display:flex; align-items:baseline; gap:16px; margin-bottom:34px;} .sec-head h2{font-size:clamp(26px,4vw,40px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1;} .sec-head .rule{flex:1; height:3px; background:var(--line-2);} .sec-head .count{font-size:12px; font-weight:800; color:var(--muted); letter-spacing:.18em;} /* about */ .about{display:grid; grid-template-columns:264px 1fr; gap:52px; align-items:start;} /* The portrait sits inside a thin gold mat. This was a frame offset 16px down and right with z-index:-1, which only ever showed as a bracket hanging off the bottom corner, so it read as a misalignment rather than a flourish. An even mat cannot look crooked, and the lighter shadow stops the two edges muddying each other. */ .about .shot{position:relative; padding:12px;} .about .shot::after{content:''; position:absolute; inset:0; pointer-events:none; border:2px solid var(--amber-lt); border-radius:20px;} .about .shot img{position:relative; width:100%; aspect-ratio:5/6; object-fit:cover; border-radius:12px; box-shadow:var(--shadow-1);} .about h3{font-size:clamp(24px,3.4vw,34px); font-weight:800; letter-spacing:-.02em;} .about p{color:var(--text-2); font-size:17.5px; margin-top:16px; max-width:60ch;} .about .facts{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;} .about .facts span{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; background:var(--sage-lt); color:var(--text-2); padding:8px 14px; border-radius:999px; border:1px solid var(--line);} @media (max-width:760px){ /* 88px of padding top and bottom on every section is a lot of empty scrolling on a phone. */ section{padding:58px 0;} .sec-head{margin-bottom:26px;} .about{grid-template-columns:1fr; gap:30px;} /* A 5:6 portrait at full phone width is 470px tall and swallows the screen before a word of the copy is visible. Cap it and centre it. */ .about .shot{max-width:280px; margin:0 auto;} } /* link cards */ .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(246px,1fr)); gap:18px;} /* Flex column so the "Visit" line can be pinned to the bottom. Without it a card with a longer blurb (LinkedIn) drops its link 20px below its neighbours. */ .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow-1); position:relative; overflow:hidden; display:flex; flex-direction:column; transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);} .card::before{content:''; position:absolute; left:0; top:0; height:3px; width:0; background:var(--accent); transition:width .28s var(--ease);} .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-2); border-color:var(--line-2);} .card:hover::before{width:100%;} .card b{display:block; font-size:18.5px; font-weight:800; letter-spacing:-.01em;} .card p{color:var(--muted); font-size:15px; margin-top:8px;} .card .go{margin-top:auto; padding-top:18px; align-self:flex-start; color:var(--accent); font-weight:800; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; display:inline-flex; gap:8px;} .card:hover .go .ar{transform:translateX(4px);} .card .go .ar{transition:transform .18s var(--ease);} /* feature */ .feature{background:var(--navy); color:#fff; border-radius:22px; padding:48px 42px; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; box-shadow:var(--shadow-2); position:relative; overflow:hidden;} .feature::after{content:''; position:absolute; right:-90px; top:-90px; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(230,201,120,.20),transparent 70%);} .feature h3{font-size:clamp(26px,4.2vw,40px); font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1;} .feature h3 em{font-style:normal; color:var(--amber-lt);} .feature p{color:rgba(255,255,255,.8); margin-top:14px; max-width:56ch; font-size:16.5px;} @media (max-width:780px){ .feature{grid-template-columns:1fr; padding:36px 26px;} } /* gallery */ .gallery{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px;} .gallery button{padding:0; border:0; background:none; cursor:zoom-in; border-radius:14px; overflow:hidden; position:relative; aspect-ratio:1; box-shadow:var(--shadow-1);} .gallery img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease), filter .4s var(--ease);} .gallery button:hover img{transform:scale(1.06); filter:saturate(1.1);} .gallery figcaption{position:absolute; inset:auto 0 0 0; padding:14px 16px; text-align:left; color:#fff; font-size:13px; font-weight:700; opacity:0; transform:translateY(8px); background:linear-gradient(180deg,transparent,rgba(14,23,41,.85)); transition:opacity .25s var(--ease), transform .25s var(--ease);} .gallery button:hover figcaption,.gallery button:focus-visible figcaption{opacity:1; transform:none;} /* lightbox */ .lb{position:fixed; inset:0; z-index:200; display:none; place-items:center; background:rgba(9,14,25,.94); padding:24px;} .lb[open]{display:grid;} .lb img{max-width:min(1040px,92vw); max-height:82vh; border-radius:12px; box-shadow:var(--shadow-2);} .lb .cap{color:#E6E9EF; font-size:14px; margin-top:14px; text-align:center;} .lb .x{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; font-size:20px; cursor:pointer;} .lb .nav-btn{position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(0,0,0,.3); color:#fff; font-size:22px; cursor:pointer;} .lb .prev{left:18px;} .lb .next{right:18px;} .lb button:hover{background:rgba(255,255,255,.16);} /* notice */ .notice{display:grid; grid-template-columns:300px 1fr; background:var(--surface); border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-1); transition:transform .2s var(--ease), box-shadow .2s var(--ease);} .notice:hover{transform:translateY(-5px); box-shadow:var(--shadow-2);} .notice .pic{min-height:210px; background-size:cover; background-position:center;} .notice .body{padding:30px 32px;} .notice .tag{display:inline-block; background:var(--amber-xlt); color:var(--flame); border:1px solid #EBD9A8; font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; padding:7px 13px; border-radius:999px;} :root[data-theme="dark"] .notice .tag{background:rgba(230,201,120,.12); color:var(--amber-lt); border-color:rgba(230,201,120,.3);} .notice h3{font-size:clamp(22px,3.2vw,30px); font-weight:800; margin:14px 0 8px; letter-spacing:-.02em; line-height:1.05;} .notice p{color:var(--muted); font-size:15.5px;} .notice .go{margin-top:16px; color:var(--accent); font-weight:800; font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;} @media (max-width:680px){ .notice{grid-template-columns:1fr;} .notice .pic{min-height:190px;} } /* contact */ .contact{background:var(--bg-2); border:1px solid var(--line); border-radius:20px; padding:40px; text-align:center;} .contact h3{font-size:clamp(24px,3.4vw,32px); font-weight:800; letter-spacing:-.02em;} .contact p{color:var(--muted); margin-top:10px;} .contact .row{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:22px;} .btn-dark{background:var(--navy); color:#fff;} .btn-dark:hover{transform:translateY(-3px); background:var(--navy-2);} .btn-line{border-color:var(--line-2); color:var(--text);} .btn-line:hover{transform:translateY(-3px); border-color:var(--accent);} footer{background:var(--navy); color:rgba(255,255,255,.68); padding:44px 0; margin-top:20px; font-size:13.5px;} footer .shell{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;} footer a{color:var(--amber-lt); font-weight:700;} /* ---------------- touch targets ---------------- The brand and the footer links are 18 to 23px tall, under the 44px a finger wants. Coarse pointers only, so desktop spacing is untouched. */ @media (pointer: coarse){ .nav .brand{display:inline-block; padding:12px 0;} footer a{display:inline-block; padding:12px 0;} .nav .links a{padding:12px 0;} .themetoggle,.navtoggle{width:44px; height:44px;} } /* ---------------- reveal on scroll ---------------- */ .reveal{transition:opacity .7s var(--ease), transform .7s var(--ease);} /* Hidden ONLY when JS is running to reveal it again. Without JS the content is simply visible, which is the whole point of progressive enhancement. */ .js .reveal{opacity:0; transform:translateY(22px);} .reveal.in{opacity:1; transform:none;} .reveal[data-d="1"]{transition-delay:.08s;} .reveal[data-d="2"]{transition-delay:.16s;} .reveal[data-d="3"]{transition-delay:.24s;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none !important; transition-duration:.01ms !important;} .reveal{opacity:1; transform:none;} } @media print{ .nav,.scrollcue,.lb,.themetoggle{display:none !important;} .hero{background:#fff; color:#000;} body{color:#000; background:#fff;} }