/* Theme Name: Callum Reid Theme URI: https://callumreid.com.au Author: Techiyah Digital Agency Description: Custom theme for Callum Reid, career pivot coach. Converted from the original Claude Design artifact with the markup, palette and interactions preserved exactly. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: callum-reid */ /* ========================================================================== Design tokens and base styles — carried over verbatim from the original design. --primary / --bg / --surface / --text / --muted / --accent / --accent-hover / --support are the brand's canonical colour names. ========================================================================== */ :root{ --primary:#1F3A34; --primary-deep:#16281F; --bg:#F6F1E7; --surface:#FFFFFF; --text:#20241F; --muted:#7C7461; --accent:#A94A26; --accent-hover:#8A3C1E; --support:#E8DCC5; --hairline:#DCD3BE; --sand:#EFE7D6; --ease:cubic-bezier(0.22,0.61,0.36,1); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased;text-wrap:pretty;} h1,h2,h3{font-family:'Fraunces',serif;margin:0;font-weight:600;letter-spacing:-0.015em;} p{margin:0;} a{color:var(--accent);text-decoration:none;transition:color .18s var(--ease),opacity .18s var(--ease);} a:hover{color:var(--accent-hover);} button{font-family:'DM Sans',sans-serif;cursor:pointer;border:none;background:none;transition:all .22s var(--ease);} input{font-family:'DM Sans',sans-serif;outline:none;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);} input:focus{border-color:var(--primary) !important;box-shadow:0 0 0 3px rgba(31,58,52,.08);} [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .85s var(--ease),transform .85s var(--ease);will-change:opacity,transform;} [data-reveal="left"]{transform:translateX(-28px);} [data-reveal="right"]{transform:translateX(28px);} [data-reveal="scale"]{transform:scale(.965);} [data-reveal].is-in{opacity:1;transform:none;} [data-reveal] .ph{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease) .08s;} [data-reveal].is-in .ph{clip-path:inset(0 0 0 0);} .btn-p{position:relative;overflow:hidden;} .btn-p::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none; background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.26) 50%,rgba(255,255,255,0) 62%); transform:translateX(-130%);transition:transform .75s var(--ease);} .btn-p:hover::after{transform:translateX(130%);} .mq{-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);} .navpill.is-active{background:var(--surface);color:var(--primary);box-shadow:0 2px 8px rgba(31,58,52,.08);} [data-spot]{position:relative;} [data-spot]::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity .5s var(--ease); background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(217,167,140,.16),transparent 70%);} [data-spot]:hover::before{opacity:1;} [data-spot] > *{position:relative;z-index:1;} [data-reveal][data-delay="1"]{transition-delay:.09s;} [data-reveal][data-delay="2"]{transition-delay:.18s;} [data-reveal][data-delay="3"]{transition-delay:.27s;} [data-reveal][data-delay="4"]{transition-delay:.36s;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} [data-reveal]{opacity:1;transform:none;transition:none;} } @keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}} @keyframes popIn{from{opacity:0;transform:translateY(12px) scale(.98);}to{opacity:1;transform:none;}} @keyframes drift{0%{transform:translateY(0);}50%{transform:translateY(-10px);}100%{transform:translateY(0);}} @keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}} @keyframes lineUp{from{transform:translateY(105%);}to{transform:translateY(0);}} @keyframes ruleIn{from{transform:scaleX(0);}to{transform:scaleX(1);}} .lineclip{display:block;overflow:hidden;padding-bottom:.2em;margin-bottom:-.2em;} .lineclip > span{display:block;animation:lineUp .95s var(--ease) both;} .grain{position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.035;mix-blend-mode:multiply; background-image:url("data:image/svg+xml;utf8,");} .eyebrow{display:inline-flex;align-items:center;gap:10px;} .eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;transform-origin:left;transform:scaleX(0);transition:transform .7s var(--ease) .15s;} [data-reveal].is-in .eyebrow::before,.is-in.eyebrow::before{transform:scaleX(1);} .mq:hover > div{animation-play-state:paused;} .mq-item{transition:color .25s var(--ease),opacity .25s var(--ease);} .mq-item:hover{color:var(--accent) !important;} .ph{position:relative;overflow:hidden;background: repeating-linear-gradient(135deg, rgba(31,58,52,.045) 0 10px, rgba(31,58,52,0) 10px 20px), var(--sand); } .ph::after{content:attr(data-label);position:absolute;left:12px;bottom:12px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;color:var(--muted);background:rgba(255,255,255,.82);padding:5px 9px;border-radius:999px;} .ph:has(img){background:var(--sand);} .ph:has(img)::after{content:none;} .ph > img{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;max-width:none !important;object-fit:cover !important;aspect-ratio:auto !important;} .lift{transition:transform .35s var(--ease),box-shadow .35s var(--ease);} .lift:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(31,58,52,.12);} .zoom{transition:transform .9s var(--ease);} .zoomwrap:hover .zoom{transform:scale(1.045);} .pivot-chip{transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s var(--ease);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(31,58,52,.05),0 2px 6px rgba(31,58,52,.05),0 10px 22px rgba(31,58,52,.08);} .pivot-chip:hover{transform:translateY(-3px);border-color:rgba(169,74,38,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(31,58,52,.05),0 4px 10px rgba(31,58,52,.1),0 20px 38px rgba(31,58,52,.18);} /* ========================================================================== Shared card elevation system — applied to every card, photo frame and panel so they read as considered surfaces rather than flat rectangles. Three layers always travel together: an inset top highlight (the light catching a bevelled edge), a tight contact shadow, and a soft ambient shadow, all tinted toward the forest primary. No flat grey borders and no neutral or pure-black shadows anywhere in this system. ========================================================================== */ .card-surface{ border:1px solid rgba(31,58,52,.07); box-shadow: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(31,58,52,.04), 0 2px 6px rgba(31,58,52,.05), 0 14px 28px rgba(31,58,52,.09); } .lift:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 10px rgba(31,58,52,.08), 0 22px 44px rgba(31,58,52,.16); } /* Photo frames: the outer frame only — .zoom marks the inner crop layer used by the two-layer hero/problem/included images, which must stay unstyled or the ring and shadow would double up. */ .ph:not(.zoom){ border:1px solid rgba(31,58,52,.08); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 8px rgba(31,58,52,.06), 0 16px 34px rgba(31,58,52,.12); } .opt{ box-shadow:0 1px 3px rgba(31,58,52,.04); } .ul{position:relative;} .ul::after{content:"";position:absolute;left:0;bottom:-5px;height:1.5px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .32s var(--ease);} .ul:hover::after{transform:scaleX(1);transform-origin:left;} a.btn-p{display:inline-flex;align-items:center;justify-content:center;line-height:1.2;white-space:nowrap;} nav a{white-space:nowrap;} .btn-p{transition:background .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);} .btn-p:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,58,52,.18);} .opt:hover{border-color:var(--accent) !important;background:#FBF7EE;transform:translateX(3px);} .navpill{transition:background .22s var(--ease),color .22s var(--ease);} .navpill:hover{background:var(--surface);color:var(--primary);text-decoration:none;box-shadow:0 2px 8px rgba(31,58,52,.07);} .soc{transition:background .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease);} .soc:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.45);transform:translateY(-2px);text-decoration:none;color:#fff;} @media (max-width:900px){ [data-screen-label="Booking"] > div > div{grid-template-columns:minmax(0,1fr) !important;} footer > div > div:nth-child(1){grid-template-columns:minmax(0,1fr) !important;gap:24px !important;} footer > div > div:nth-child(2){grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important;gap:32px !important;} } .arrowcta .arw{display:inline-block;transition:transform .28s var(--ease);} .arrowcta:hover .arw{transform:translateX(4px);} @media (max-width:1100px){ nav [data-nav-inner] > div:nth-child(2){display:none !important;} nav [data-nav-burger]{display:flex !important;} nav [data-nav-drawer]{display:flex !important;} } @media (max-width:1000px){ nav [data-nav-inner]{padding:14px 24px !important;} section,footer{padding-left:24px !important;padding-right:24px !important;} [data-screen-label="Hero"],[data-screen-label="Problem"],[data-screen-label="Audience"] > div, [data-screen-label="Whats included"] > div,[data-screen-label="FAQ"] > div{ grid-template-columns:minmax(0,1fr) !important;gap:40px !important;position:static !important; } [data-screen-label="Problem"] > div:first-child,[data-screen-label="FAQ"] > div > div:first-child{position:static !important;} } @media (max-width:760px){ nav [data-nav-inner]{flex-wrap:wrap;gap:12px !important;} nav [data-nav-inner] > div{display:none !important;} section{padding-top:64px !important;padding-bottom:64px !important;} [data-screen-label="Hero"]{padding-top:48px !important;} [data-screen-label="Quiz flow"] > div > div:last-child{padding:26px !important;} [data-screen-label="Quiz flow"] [style*="180px"]{grid-template-columns:minmax(0,1fr) !important;} [data-screen-label="Chat widget"]{bottom:16px !important;right:16px !important;} } /* ========================================================================== Conversion additions: state classes that replace the design runtime's conditional rendering. Everything above this line is the original CSS. ========================================================================== */ /* The original runtime added and removed these nodes; here they stay in the DOM and are toggled with [hidden]. The nav drawer needs the extra specificity to beat the "nav [data-nav-drawer]{display:flex !important}" rule above. */ [hidden]{display:none !important;} nav [data-nav-burger][hidden], nav [data-nav-drawer][hidden]{display:none !important;} /* The design tool expressed these hover states with a `style-hover` attribute, which browsers ignore. They are real CSS here. !important is required because the resting colours are inline styles, matching the original markup. */ .hv-accent:hover{background:var(--accent-hover) !important;color:#fff !important;} .hv-primary:hover{background:var(--primary-deep) !important;color:#fff !important;} .hv-primary-cream:hover{background:var(--primary-deep) !important;color:var(--bg) !important;} .hv-support:hover{background:var(--support) !important;color:var(--primary) !important;} /* Keyboard focus. The original design had no visible focus ring; this keeps the look but makes the page navigable by keyboard. */ a:focus-visible,button:focus-visible,input:focus-visible{ outline:2px solid var(--accent);outline-offset:3px;border-radius:6px; } /* Below 760px the original CSS hides every child of the nav bar, which leaves phones with a logo and no way to navigate or book. Keep the burger reachable so the drawer opens; the drawer carries the booking CTA, so the header button stays hidden and the bar stays on one line. */ @media (max-width:760px){ nav [data-nav-inner]{flex-wrap:nowrap !important;} nav [data-nav-inner] > div:last-child{display:flex !important;} nav [data-nav-inner] > div:last-child > a.btn-p{display:none !important;} nav [data-nav-drawer]{padding-bottom:26px !important;} }