@charset "utf-8"; /* ============================================================ CandyWrap — Modern component layer Loaded LAST. Overrides legacy theme styles. Sections: 0 Tokens · 1 Focus · 2 Gaps · 3 Clients · 4 Testimonials 5 Contact · 6 Process/Service cards ============================================================ */ /* ---------- 0. Tokens ---------- */ :root { --cw-accent: #FF5555; --cw-accent-soft: #FFECEC; --cw-ink: #0A2342; --cw-ink-soft: #5A6B82; --cw-line: #ECEFF3; --cw-band: #F4F6F8; --cw-page: #FDFAFA; /* one page colour, site-wide */ --cw-surface: #FFFFFF; --cw-surface-alt: #FAFBFC; /* One gap value for every card grid on the site */ --cw-gap: 16px; --cw-gap-half: 8px; --cw-radius: 6px; --cw-radius-lg: 8px; --cw-shadow: 0 1px 2px rgba(10, 35, 66, .04), 0 8px 24px rgba(10, 35, 66, .06); /* Resting card: no border, mild spread, very light shadow. Alphas are ~5x lower than before (.05/.09 -> .010/.018). A literal 10x cut lands under 1/255 and renders as nothing — these are about the faintest values that still read on #FDFAFA. Drop them further only if you want the shadow gone entirely. */ --cw-shadow-card: 0 1px 2px rgba(10, 35, 66, .010), 0 4px 14px -4px rgba(10, 35, 66, .018); --cw-shadow-hover: 0 2px 4px rgba(10, 35, 66, .06), 0 16px 40px rgba(10, 35, 66, .10); --cw-ease: cubic-bezier(.4, 0, .2, 1); } /* ---------- 1. Focus: kill the black/white click outline ---------- */ /* Mouse clicks never show a ring; keyboard users still get one. */ a, a:link, a:visited, a:hover, a:active, a:focus, button, button:focus, button:active, .btn, .btn:focus, .btn:active, .btn-system, .btn-system:focus, .navbar-toggle, .navbar-toggle:focus, .panel-title a, .panel-title a:focus, .back-to-top, .back-to-top:focus, .qc, .qc:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus, summary:focus { outline: 0 !important; outline-offset: 0 !important; -webkit-tap-highlight-color: transparent; } a:focus, button:focus, .btn:focus, .btn-system:focus { box-shadow: none; } /* Accessible keyboard-only ring */ a:focus-visible, button:focus-visible, .btn:focus-visible, .btn-system:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--cw-accent) !important; outline-offset: 3px !important; border-radius: 4px; } input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none !important; } /* Remove the dotted ring Firefox draws on buttons */ ::-moz-focus-inner { border: 0 !important; padding: 0 !important; } /* ---------- 1a. One page colour ---------- */ /* Every content section is transparent; the coral comes from once. Cards stay white so they lift off it. The footer and its CTA band keep their own colours as a deliberate end-cap. */ body { background-color: var(--cw-page); } /* #container carries its own #fdfafa in style.css and would cover the body colour, so it has to be cleared too. */ #container, #loader { background-color: var(--cw-page); } .page-banner, #content, #content.full-sections, #content > .section, #content .section1, .svs, .cw-section, .cw-work, .cw-clients, .cw-testimonials, .cw-contact { background: transparent; } /* legacy inline background left on theme sections */ #content .section[style*="background"], .page-banner[style*="background"] { background-color: transparent !important; background-image: none !important; } /* legacy white panels stay white — they're cards, not bands */ .svs-box, .left-pannel { border-radius: var(--cw-radius-lg); box-shadow: var(--cw-shadow-card); } .svs-box { padding: 12px 32px; } /* homepage services intro column */ .cw-svs__intro h2 { margin: 0; padding-right: 4%; } /* Vertically centre the heading against the accordion. The columns are Bootstrap 3 floats, so flex has to clear the float for align-items to have any effect. */ @media (min-width: 992px) { .cw-svs { display: flex; align-items: center; } .cw-svs > [class*="col-"] { float: none; } } @media (max-width: 991px) { .svs-box { padding: 8px 24px; margin-top: 32px; } .cw-svs__intro h2 { padding-right: 0; } } /* ---------- 1c. Header — close the gap under the nav underline ---------- */ /* Bootstrap's own defaults were never overridden by the theme: .navbar has margin-bottom: 20px and .navbar-nav has margin: 7.5px 0, which together left ~27px of dead space below the active underline. */ .navbar.navbar-top { margin-bottom: 0; border: 0; } .navbar-default .navbar-nav { margin-top: 0; margin-bottom: 0; } .navbar-default .navbar-nav > li > a { margin-bottom: 0; } /* The remaining gap was a height mismatch, not margin: .navbar-brand = 27 + 36 (logo) + 27 = 90px nav link = 28 + 24 (line) + 28 + 2 = 82px The logo is the taller element, so it set the bar height and the nav links floated 8px short of the bottom — leaving dead space under the underline. Stretching the links to full height puts the border flush with the bottom of the bar. */ @media (min-width: 768px) { .navbar-top > .container { display: flex; align-items: stretch; } .navbar-top > .container > .navbar-header { display: flex; align-items: center; float: none; } .navbar-top > .container > .navbar-collapse { display: flex !important; align-items: stretch; float: none; margin-left: auto; padding-right: 0; } .navbar-top .navbar-nav { display: flex; align-items: stretch; float: none; } .navbar-top .navbar-nav > li { display: flex; align-items: stretch; } /* vertical padding removed — flex centring handles it now */ .navbar-top .navbar-nav > li > a { display: flex; align-items: center; padding-top: 0; padding-bottom: 0; } } /* ---------- 1b. Hero — drifting brand-colour glow ---------- */ /* Two soft brand blobs behind the hero headline. Pure CSS, no markup change: red on ::before, coral on ::after, each with its own timing so the drift never looks synchronised. Softness comes from the radial gradients themselves rather than filter: blur(). */ .page-banner { position: relative; overflow: hidden; isolation: isolate; } /* keep the headline above the glow */ .page-banner > .container { position: relative; z-index: 1; } .page-banner::before, .page-banner::after { content: ""; position: absolute; inset: -30%; z-index: 0; pointer-events: none; background-repeat: no-repeat; will-change: transform; } /* blob 1 — light brand red */ .page-banner::before { background-image: radial-gradient(36% 42% at 24% 36%, rgba(255, 122, 122, .22) 0%, rgba(255, 122, 122, 0) 70%); animation: cw-drift-a 18s ease-in-out infinite alternate; } /* blob 2 — light coral */ .page-banner::after { background-image: radial-gradient(34% 38% at 74% 28%, rgba(255, 168, 133, .20) 0%, rgba(255, 168, 133, 0) 72%); animation: cw-drift-b 23s ease-in-out infinite alternate; } @keyframes cw-drift-a { 0% { transform: translate3d(-8%, -5%, 0) rotate(-8deg) scale(1); } 50% { transform: translate3d(10%, 7%, 0) rotate(10deg) scale(1.22); } 100% { transform: translate3d(-5%, 9%, 0) rotate(-4deg) scale(1.1); } } @keyframes cw-drift-b { 0% { transform: translate3d(7%, 6%, 0) scale(1.06); } 50% { transform: translate3d(-11%, -6%, 0) scale(1.26); } 100% { transform: translate3d(6%, -9%, 0) scale(1); } } @media (max-width: 767px) { .page-banner::before { opacity: .8; } .page-banner::after { opacity: .7; } } @media (prefers-reduced-motion: reduce) { .page-banner::before, .page-banner::after { animation: none; } } /* ---------- 1d. Services accordion (homepage right column) ---------- */ /* candycolour.css sets a global `a { color: #FF5555 }`, which was turning every expanded sub-item red. Scoped back to ink here. The footer accordion is deliberately excluded — it needs light links on the dark panel. */ .svs-box .panel-group { margin-bottom: 0; } .svs-box .panel { margin: 0; border: 0; border-bottom: 1px solid var(--cw-line); border-radius: 0; box-shadow: none; background: transparent; } .svs-box .panel:last-child { border-bottom: 0; } .svs-box .panel + .panel { margin-top: 0; } .svs-box .panel-heading { padding: 0; } .svs-box .panel-title a { display: block; padding: 18px 44px 18px 0; font-size: 17px; font-weight: 500; line-height: 1.45; color: var(--cw-ink); } .svs-box .panel-title a:hover, .svs-box .panel-title a.collapsed:hover { color: var(--cw-accent); } .svs-box .panel-title a .control-icon { right: 4px; font-size: 14px; color: var(--cw-ink-soft); } .svs-box .panel-body { padding: 0 0 18px; border-top: 0; } .svs-box .panel-body ul { margin: 0; padding: 0; list-style: none; } .svs-box .panel-body ul li { margin: 0; padding: 0; } .svs-box .panel-body ul li a { display: block; padding: 7px 0 7px 16px; position: relative; font-size: 14.5px; line-height: 1.55; color: var(--cw-ink-soft); transition: color .2s var(--cw-ease), padding-left .2s var(--cw-ease); } .svs-box .panel-body ul li a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 1px; background: currentColor; opacity: .45; transition: width .2s var(--cw-ease); } .svs-box .panel-body ul li a:hover { color: var(--cw-accent); padding-left: 20px; } .svs-box .panel-body ul li a:hover::before { width: 10px; opacity: 1; } /* ---------- 2. Standard, thinner gaps for every card grid ---------- */ .cw-grid { display: grid; gap: var(--cw-gap); margin: 0; padding: 0; list-style: none; } /* Bootstrap-3 rows used as card grids: tighten 30px gutters to var(--cw-gap) */ .cw-tight { margin-left: calc(var(--cw-gap-half) * -1); margin-right: calc(var(--cw-gap-half) * -1); } .cw-tight > [class*="col-"] { padding-left: var(--cw-gap-half); padding-right: var(--cw-gap-half); margin-bottom: var(--cw-gap); } /* --- Legacy card grids brought to the same rhythm --- */ /* Portfolio / project cards (isotope + static) */ #portfolio { margin-left: calc(var(--cw-gap-half) * -1); margin-right: calc(var(--cw-gap-half) * -1); } .portfolio-item, #portfolio .portfolio-item { margin-bottom: var(--cw-gap); padding-left: var(--cw-gap-half); padding-right: var(--cw-gap-half); } /* Service boxes on the Services page */ .service-box { margin-bottom: var(--cw-gap); padding-left: var(--cw-gap-half); padding-right: var(--cw-gap-half); } .svs-box > .row, .row:has(> .service-box) { margin-left: calc(var(--cw-gap-half) * -1); margin-right: calc(var(--cw-gap-half) * -1); } /* Owl carousel items (services "Recent Works", any remaining carousel) */ .touch-carousel .owl-item > .item, .custom-carousel .owl-item > .item { padding: 0 var(--cw-gap-half); } /* Footer widget columns */ .footer-widgets > [class*="col-"] { margin-bottom: var(--cw-gap); } /* ---------- 2b. Selected work — studio project grid ---------- */ .cw-work { padding: 72px 0 88px; } .cw-work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .cw-work__eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-accent); background: var(--cw-accent-soft); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .cw-work__title { font-size: 30px; line-height: 1.25; font-weight: 600; color: var(--cw-ink); margin: 0; } .cw-work__all { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--cw-ink); padding-bottom: 4px; border-bottom: 1.5px solid var(--cw-line); transition: color .22s var(--cw-ease), border-color .22s var(--cw-ease), gap .22s var(--cw-ease); } .cw-work__all:hover, .cw-work__all:focus { color: var(--cw-accent); border-color: var(--cw-accent); gap: 12px; } /* --- grid: thin, standard gap --- */ .cw-work__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cw-gap); } /* --- card --- */ .cw-work__card { display: block; color: inherit; text-decoration: none; margin: 0; padding: 14px 14px 24px; border: 0; border-radius: var(--cw-radius-lg); overflow: hidden; background: var(--cw-surface); box-shadow: var(--cw-shadow-card); transition: transform .4s var(--cw-ease), box-shadow .4s var(--cw-ease); } .cw-work__card:hover, .cw-work__card:focus { color: inherit; text-decoration: none; transform: translateY(-4px); box-shadow: var(--cw-shadow-hover); } /* --- media --- */ /* Source images are 16:9. The box matches that ratio and uses `contain`, so the whole image is always visible — never cropped. A non-16:9 image will letterbox against the tile background instead of losing its edges. */ .cw-work__media { position: relative; display: block; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--cw-radius); background: #F4F6F8; } .cw-work__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; transition: opacity .4s var(--cw-ease); } /* No zoom on hover — scaling inside a clipped box would crop the edges. */ .cw-work__card:hover .cw-work__media img, .cw-work__card:focus .cw-work__media img { opacity: .96; } .cw-work__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 35, 66, .55) 0%, rgba(10, 35, 66, .12) 42%, rgba(10, 35, 66, 0) 70%); opacity: 0; transition: opacity .4s var(--cw-ease); pointer-events: none; } .cw-work__card:hover .cw-work__scrim, .cw-work__card:focus .cw-work__scrim { opacity: 1; } .cw-work__cta { position: absolute; left: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: #fff; background: rgba(255, 255, 255, .14); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, .30); padding: 10px 18px; border-radius: 999px; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--cw-ease), transform .35s var(--cw-ease); pointer-events: none; } .cw-work__card:hover .cw-work__cta, .cw-work__card:focus .cw-work__cta { opacity: 1; transform: translateY(0); } .cw-work__index { position: absolute; top: 14px; right: 20px; font-size: 46px; line-height: 1; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: #fff; opacity: .55; transform: translateY(0); transition: opacity .35s var(--cw-ease), transform .35s var(--cw-ease); text-shadow: 0 2px 14px rgba(10, 35, 66, .45); pointer-events: none; } .cw-work__card:hover .cw-work__index, .cw-work__card:focus .cw-work__index { opacity: 1; transform: translateY(-2px); } /* --- caption --- */ /* zero side padding so the caption lines up with the image edges */ .cw-work__body { padding: 18px 0 0; } .cw-work__client { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cw-accent); } .cw-work__name { font-size: 21px; line-height: 1.35; font-weight: 600; color: var(--cw-ink); margin: 0 0 12px; transition: color .22s var(--cw-ease); } .cw-work__card:hover .cw-work__name, .cw-work__card:focus .cw-work__name { color: var(--cw-accent); } .cw-work__tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; } .cw-work__tags li { font-size: 12.5px; line-height: 1; color: var(--cw-ink-soft); background: transparent; border: 1px solid var(--cw-line); padding: 7px 13px; border-radius: 999px; transition: border-color .22s var(--cw-ease), color .22s var(--cw-ease); } .cw-work__card:hover .cw-work__tags li, .cw-work__card:focus .cw-work__tags li { border-color: #DCE2EA; color: var(--cw-ink); } @media (max-width: 991px) { .cw-work { padding: 56px 0 64px; } .cw-work__title { font-size: 24px; } .cw-work__name { font-size: 19px; } } @media (max-width: 767px) { .cw-work__grid { grid-template-columns: 1fr; } .cw-work__head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 26px; } .cw-work__title { font-size: 22px; } .cw-work__media { aspect-ratio: 16 / 9; } } @media (prefers-reduced-motion: reduce) { .cw-work__card, .cw-work__media img, .cw-work__scrim, .cw-work__cta, .cw-work__index { transition: none; } .cw-work__card:hover { transform: none; } .cw-work__card:hover .cw-work__media img { transform: none; } } /* ---------- 3. Clients — modern tile grid ---------- */ .cw-clients { padding: 72px 0; } .cw-clients__head { text-align: center; margin-bottom: 36px; } .cw-clients__eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-accent); background: var(--cw-accent-soft); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .cw-clients__title { font-size: 30px; line-height: 1.25; font-weight: 600; color: var(--cw-ink); margin: 0; } .cw-clients__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--cw-gap); } .cw-client { display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 18px; background: var(--cw-surface); border: 0; border-radius: var(--cw-radius); box-shadow: var(--cw-shadow-card); transition: transform .28s var(--cw-ease), box-shadow .28s var(--cw-ease); will-change: transform; } .cw-client img { max-width: 100%; max-height: 52px; width: auto; height: auto; filter: grayscale(100%); opacity: .55; transition: filter .28s var(--cw-ease), opacity .28s var(--cw-ease), transform .28s var(--cw-ease); } .cw-client:hover { transform: translateY(-4px); box-shadow: var(--cw-shadow-hover); } .cw-client:hover img { filter: grayscale(0); opacity: 1; transform: scale(1.04); } @media (max-width: 991px) { .cw-clients__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cw-clients { padding: 56px 0; } } @media (max-width: 767px) { .cw-clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .cw-client { min-height: 84px; padding: 12px; } .cw-client img { max-height: 38px; } .cw-clients__title { font-size: 22px; } } @media (max-width: 420px) { .cw-clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- 4. Testimonials — modern quote cards ---------- */ .cw-testimonials { padding: 80px 0; } .cw-testimonials__head { text-align: center; margin-bottom: 40px; } .cw-testimonials__eyebrow { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cw-accent); background: var(--cw-accent-soft); padding: 6px 16px; border-radius: 999px; margin-bottom: 14px; } .cw-testimonials__title { font-size: 30px; line-height: 1.25; font-weight: 600; color: var(--cw-ink); margin: 0; } .cw-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cw-gap); align-items: stretch; } .cw-quote { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--cw-surface); border: 0; border-radius: var(--cw-radius-lg); box-shadow: var(--cw-shadow-card); padding: 30px 28px 0; transition: transform .3s var(--cw-ease), box-shadow .3s var(--cw-ease); } .cw-quote::before { content: "\201C"; position: absolute; top: 8px; right: 24px; font-family: Georgia, "Times New Roman", serif; font-size: 84px; line-height: 1; color: var(--cw-accent); opacity: .12; pointer-events: none; } .cw-quote:hover { transform: translateY(-5px); box-shadow: var(--cw-shadow-hover); } .cw-quote__stars { display: flex; gap: 3px; color: var(--cw-accent); font-size: 13px; margin-bottom: 16px; } .cw-quote__text { flex: 1 1 auto; font-size: 16px; line-height: 1.7; color: #3D4A5C; margin: 0 0 24px; font-style: normal; } /* Light grey strip at the foot of each card. NOTE: this must stay a

. style.css styles the bare `footer` element dark navy, which bleeds into any nested