/* ========================================================================== THE COLOUR PASS Loaded last, so it wins. The brief: bolder, more cheerful, more playful, without becoming chaotic and without losing readability. The one rule that keeps it honest. Measured against white: pink #FF4F93 3.09 turquoise #3DC4B9 2.14 orange #FF8A3D 2.34 yellow #FFC24B 1.74 lavender #B7A6E8 2.03 blue #3E7CD9 4.10 Only the deep pink and the deep blue can carry white body text. Every other brand colour carries the dark ink instead, which measures 5.8 to 8.5 on them. So each coloured surface declares --on, and its text uses that. Nothing on this page guesses. ========================================================================== */ :root{ --on-pink:#fff; /* on --pink-btn 4.7:1 */ --on-blue:#fff; /* on --blue-deep 6.6:1 */ --blue-deep:#2A5CA8; --on-yellow:var(--ink); /* 8.5:1 */ --on-orange:var(--ink); /* 5.8:1 */ --on-turquoise:var(--ink); /* 6.4:1 */ --on-lavender:var(--ink); /* 6.9:1 */ --on-sky:var(--ink); /* 7.6:1 */ --on-green:var(--ink); /* 6.1:1 */ } /* ========================================================================== 1 · THE LOGO It was 52px in a 78px bar, which reads as a favicon rather than a mark. ========================================================================== */ :root{--nav-h:92px} .brand img{width:74px;height:74px;border:3px solid #fff; box-shadow:0 2px 0 rgba(51,40,74,.06), 0 10px 22px rgba(51,40,74,.18); transition:transform .4s var(--ease-back)} .brand:hover img{transform:rotate(-6deg) scale(1.05)} .brand b{font-size:1.24rem} @media (max-width:1100px){ :root{--nav-h:82px} .brand img{width:62px;height:62px} } @media (max-width:560px){ .brand img{width:56px;height:56px} } /* ========================================================================== 2 · SECTIONS AS COLOUR BLOCKS Flat white boxes are replaced by tinted bands with a curved top edge, so the page reads as one continuous world rather than stacked containers. ========================================================================== */ .sec-tint{position:relative} .sec-tint::before{content:"";position:absolute;left:-2vw;right:-2vw;top:-46px;height:70px; background:inherit;border-radius:50% 50% 0 0 / 100% 100% 0 0;pointer-events:none} .sec-philosophy,#philosophy{--tint:color-mix(in srgb,var(--yellow-soft) 92%,var(--orange-soft))} #services{--tint:color-mix(in srgb,var(--sky-soft) 88%,var(--blue-soft))} #collaborations{--tint:color-mix(in srgb,var(--lavender-soft) 86%,var(--pink-soft))} /* adventures and freebies sat on the bare page; they get their own ground */ #adventures{background:linear-gradient(180deg,rgba(255,249,241,0) 0%,var(--turquoise-soft) 22%,var(--turquoise-soft) 78%,rgba(255,249,241,0) 100%)} #freebies{background:linear-gradient(180deg,rgba(255,249,241,0) 0%,#FFF1D2 18%,#FFE5D2 82%,rgba(255,249,241,0) 100%)} /* ========================================================================== 3 · THE FIVE PILLARS become colour cards ========================================================================== */ .pillar{background:#fff;border-radius:var(--r-card);padding:1.6rem 1.1rem 1.5rem; box-shadow:0 3px 0 rgba(51,40,74,.06), var(--shadow-soft); border-top:7px solid var(--c);position:relative;overflow:hidden; transition:transform .35s var(--ease-back), box-shadow .35s var(--ease)} .pillar::after{content:"";position:absolute;left:50%;top:-58px;width:150px;height:110px; transform:translateX(-50%);border-radius:50%; background:color-mix(in srgb,var(--c) 16%,#fff);z-index:0} .pillar > *{position:relative;z-index:1} .pillar:hover{transform:translateY(-8px);box-shadow:0 6px 0 rgba(51,40,74,.07), var(--shadow-soft-lg)} .pillar-ico{box-shadow:0 4px 0 rgba(51,40,74,.10), var(--shadow-soft)} /* ========================================================================== 4 · ADVENTURE CARDS get a stronger colour identity ========================================================================== */ .adv{border:0;box-shadow:0 4px 0 rgba(51,40,74,.07), var(--shadow-soft)} .adv-body{background:var(--tintc);position:relative} .adv-body::after{content:"";position:absolute;right:-30px;bottom:-30px;width:120px;height:120px; border-radius:50%;background:color-mix(in srgb,var(--c) 14%,transparent);pointer-events:none} .adv-body > *{position:relative;z-index:1} .adv-ico{box-shadow:0 4px 0 rgba(51,40,74,.12), var(--shadow-soft)} .chips li{box-shadow:0 2px 0 rgba(51,40,74,.06)} /* ========================================================================== 5 · KELLY'S COLLABORATIONS Was one large white box. Now a layered gradient card with sticker details. ========================================================================== */ .collab-side{ background:linear-gradient(150deg,var(--turquoise) 0%,#2FA9C4 52%,var(--blue) 100%); color:#fff;border-radius:34px;position:relative;overflow:hidden; box-shadow:0 8px 0 rgba(51,40,74,.10), var(--shadow-soft-lg); padding:clamp(1.7rem,3.4vw,2.4rem)} /* two soft shapes drifting inside the card */ .collab-side::before,.collab-side::after{content:"";position:absolute;border-radius:50%; pointer-events:none} .collab-side::before{width:230px;height:230px;right:-70px;top:-80px; background:rgba(255,255,255,.16)} .collab-side::after{width:170px;height:170px;left:-60px;bottom:-70px; background:rgba(255,255,255,.12)} .in-motion .collab-side::before{animation:u-drift 34s ease-in-out -6s infinite} .in-motion .collab-side::after{animation:u-drift 42s ease-in-out -18s infinite} .collab-side > *{position:relative;z-index:1} .collab-side .h3{color:#fff} /* the element chips sit as white stickers on the colour */ .collab-side .chips-big li{background:#fff;color:var(--ct,var(--ink)); box-shadow:0 4px 0 rgba(51,40,74,.14);border:0} .collab-side .soon{border-top:2px dashed rgba(255,255,255,.42)} .collab-side .soon p{color:rgba(255,255,255,.94)} .collab-side .sticker{box-shadow:0 5px 0 rgba(51,40,74,.16);font-size:.94rem} /* the "Together, We Can Create" list gets colourful tick badges */ .collab-copy .ticks li{padding-left:2.5rem;min-height:1.9rem;display:flex;align-items:center} .collab-copy .ticks li::before{ content:"";position:absolute;left:0;top:.1em;width:1.7rem;height:1.7rem;border-radius:50%; border:0;transform:none; background:var(--tc,var(--turquoise)) no-repeat center/.82rem .82rem; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13l5.5 5.5L20 6'/%3E%3C/svg%3E"); box-shadow:0 3px 0 rgba(51,40,74,.14)} .collab-copy .ticks li:nth-child(1){--tc:var(--pink)} .collab-copy .ticks li:nth-child(2){--tc:var(--turquoise)} .collab-copy .ticks li:nth-child(3){--tc:var(--yellow)} .collab-copy .ticks li:nth-child(4){--tc:var(--blue)} .collab-copy .ticks li:nth-child(5){--tc:var(--orange)} .collab-copy .ticks li:nth-child(6){--tc:var(--lavender)} /* ========================================================================== 6 · FREEBIES FOR LITTLE EXPLORERS Was four white boxes. Each card is now filled with its own colour, and the text colour is chosen from the measured table at the top of this file. ========================================================================== */ .free{background:var(--card);color:var(--on,var(--ink));border-radius:30px; border:0;border-top:0; box-shadow:0 6px 0 rgba(51,40,74,.10), var(--shadow-soft); overflow:hidden;position:relative;padding:2rem 1.35rem 1.7rem} .free::before{content:"";position:absolute;left:50%;top:-70px;width:190px;height:140px; transform:translateX(-50%);border-radius:50%;background:rgba(255,255,255,.26)} .free > *{position:relative;z-index:1} .free:hover{transform:translateY(-8px);box-shadow:0 10px 0 rgba(51,40,74,.12), var(--shadow-soft-lg)} .free h3{color:var(--on,var(--ink))} .free p{color:var(--on,var(--ink));opacity:.86} .free-ico{background:#fff;color:var(--card);box-shadow:0 4px 0 rgba(51,40,74,.12)} .free .badge{background:rgba(255,255,255,.82);color:var(--ink); box-shadow:0 3px 0 rgba(51,40,74,.10)} .free-grid > li:nth-child(1){--card:var(--pink-btn);--on:#fff} .free-grid > li:nth-child(2){--card:var(--blue-deep);--on:#fff} .free-grid > li:nth-child(3){--card:var(--yellow);--on:var(--ink)} .free-grid > li:nth-child(4){--card:var(--turquoise);--on:var(--ink)} /* ========================================================================== 7 · THE REMAINING WHITE PANELS ========================================================================== */ .panel{background:linear-gradient(140deg,#fff 0%,var(--yellow-soft) 100%); border-radius:34px;box-shadow:0 6px 0 rgba(51,40,74,.07), var(--shadow-soft); position:relative;overflow:hidden} .panel::before{content:"";position:absolute;right:-60px;top:-60px;width:190px;height:190px; border-radius:50%;background:color-mix(in srgb,var(--pink) 12%,transparent)} .panel > *{position:relative;z-index:1} /* the instagram panel earns the boldest treatment on the page */ #main .sec-tint .panel{background:linear-gradient(145deg,var(--pink-btn) 0%,#E4457F 46%,var(--lavender) 100%); color:#fff} #main .sec-tint .panel .h3,#main .sec-tint .panel p{color:#fff} #main .sec-tint .panel p{opacity:.94} #main .sec-tint .panel .eyebrow{background:#fff;color:var(--pink-ink)} #main .sec-tint .panel .btn-primary{background:#fff;color:var(--pink-ink); box-shadow:0 6px 0 rgba(51,40,74,.18)} #main .sec-tint .panel .btn-primary:hover{background:var(--yellow);color:var(--ink)} #main .sec-tint .panel::before{background:rgba(255,255,255,.15)} /* the form keeps its white, it is a reading surface, but it gets a colour edge */ .form{border-top:8px solid var(--pink-btn);border-radius:30px; box-shadow:0 6px 0 rgba(51,40,74,.08), var(--shadow-soft-lg)} /* ========================================================================== 8 · SERVICE CARDS ========================================================================== */ .svc-art{padding:11px;border-radius:34px} .svc-art img{border-radius:26px} .svc-body .chips li{background:#fff} /* ========================================================================== 9 · SMALL LIVING DETAILS One per section, at whisper level, so the page keeps breathing after the entrances have finished. ========================================================================== */ .sec-head.center{position:relative} .sec-head.center::after{content:"";position:absolute;left:50%;bottom:-1.1rem; width:64px;height:6px;transform:translateX(-50%);border-radius:6px; background:linear-gradient(90deg,var(--pink),var(--yellow),var(--turquoise))} .eyebrow{box-shadow:0 3px 0 rgba(51,40,74,.08), var(--shadow-soft)} .foot{background:linear-gradient(180deg,#fff 0%,var(--sky-soft) 100%)} /* ========================================================================== 10 · REDUCED MOTION The colour stays. Only the motion stops. ========================================================================== */ @media (prefers-reduced-motion: reduce){ .collab-side::before,.collab-side::after{animation:none} .hero-decor > *{transition:none;transform:none} } /* ========================================================================== CONTRAST FIX Two gradients above carried white text but ran out into turquoise and lavender, which measure 2.14 and 2.18 against white. Both now stay deep the whole way across. Measured white contrast at every stop: #0A7A72 5.2 #1A6E96 5.7 #2A5CA8 6.6 #DE1F68 4.7 #C4265F 5.8 #7A4FBF 5.7 ========================================================================== */ .collab-side{background:linear-gradient(150deg,#0A7A72 0%,#1A6E96 52%,#2A5CA8 100%)} #main .sec-tint .panel{background:linear-gradient(145deg,var(--pink-btn) 0%,#C4265F 46%,#7A4FBF 100%)}