/* ==========================================================================
CritterCoin — Modern refresh layer
--------------------------------------------------------------------------
Scoped to and loaded AFTER site.css so it
wins on cascade order. Nothing here touches site.css / main.css, so every
other page on the site is unaffected.
To revert the whole redesign: remove the to this file and the
"cc-modern" class from in home.html.
!important is used only where the markup carries an inline style that
would otherwise win.
========================================================================== */
/* --------------------------------------------------------------------------
1. Design tokens
-------------------------------------------------------------------------- */
.cc-modern {
/* brand */
--cc-violet: #7928ca;
--cc-magenta: #ff0080;
--cc-indigo: #4f46e5;
--cc-cyan: #22d3ee;
--cc-plum: #c026d3;
/* gradients */
--cc-grad-brand: linear-gradient(115deg, #7928ca 0%, #c026d3 45%, #ff0080 100%);
/* Looping brand ramps — blue -> violet -> plum -> magenta and back.
Every stop is interpolated along that hue arc rather than jumping between
the four brand anchors: a direct pink->blue hop reversed direction almost
completely (153 deg over a 236-unit segment) and read as a hard edge on
the buttons. Sampling the arc on a cosine so the ramp decelerates into
each turnaround drops the worst discontinuity from 317 to 44.
The axis must stay 90deg — the animation slides a 300%-wide tiled
background, and only a horizontal axis lets the tile edges meet.
First and last stop are identical so the loop closes seamlessly. */
--cc-grad-cycle: linear-gradient(90deg,
#4492d4, #4289d4, #3d6fd4, #3441d3, #532bd1, #8128cb, #9b27ce, #b826d2,
#de1dd6, #eb11b9, #f6089c, #fd0288, #ff0080, #fd0288, #f6089c, #eb11b9,
#de1dd6, #b826d2, #9b27ce, #8128cb, #532bd1, #3441d3, #3d6fd4, #4289d4, #4492d4);
/* lightened tints of the same arc, for text on the dark sections */
--cc-grad-cycle-bright: linear-gradient(90deg,
#7cc4f0, #7dbff1, #7fb2f2, #829df5, #8b87f8, #ad89fa, #c582fa, #e07bf9,
#f977eb, #fa75c2, #fb73a1, #fb718c, #fb7185, #fb718c, #fb73a1, #fa75c2,
#f977eb, #e07bf9, #c582fa, #ad89fa, #8b87f8, #829df5, #7fb2f2, #7dbff1, #7cc4f0);
--cc-grad-bright: linear-gradient(115deg, #a78bfa 0%, #f0abfc 45%, #fb7185 100%);
--cc-grad-tech: linear-gradient(115deg, #4f46e5 0%, #a855f7 55%, #ec4899 100%);
--cc-grad-cyan: linear-gradient(115deg, #22d3ee 0%, #818cf8 100%);
/* ink + surfaces */
--cc-ink: #0c0a20;
--cc-ink-2: #171043;
--cc-surface: #ffffff;
--cc-surface-2: #f6f6fb;
--cc-text: #26263a;
--cc-text-muted: #5d5d78;
--cc-line: rgba(16, 12, 40, .10);
--cc-line-dark: rgba(255, 255, 255, .14);
/* shape */
--cc-r-xl: 28px;
--cc-r-lg: 22px;
--cc-r-md: 16px;
--cc-r-sm: 12px;
/* elevation */
--cc-shadow-sm: 0 1px 2px rgba(12, 10, 40, .05), 0 4px 14px rgba(12, 10, 40, .06);
--cc-shadow-md: 0 2px 4px rgba(12, 10, 40, .05), 0 14px 36px rgba(12, 10, 40, .10);
--cc-shadow-lg: 0 4px 10px rgba(12, 10, 40, .07), 0 28px 68px rgba(12, 10, 40, .16);
--cc-glow: 0 12px 40px -8px rgba(192, 38, 211, .55);
/* motion */
--cc-ease: cubic-bezier(.16, 1, .3, 1);
/* type */
--cc-font-display: 'Outfit', 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* rhythm */
--cc-section-y: clamp(72px, 8vw, 128px);
}
/* --------------------------------------------------------------------------
2. Base + typography
-------------------------------------------------------------------------- */
.cc-modern {
background-color: var(--cc-surface-2);
color: var(--cc-text);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cc-modern h1,
.cc-modern h2,
.cc-modern h3,
.cc-modern h4,
.cc-modern h5,
.cc-modern .section-header,
.cc-modern .feature-big-heading,
.cc-modern .question-text {
font-family: var(--cc-font-display);
letter-spacing: -.02em;
color: var(--cc-text);
}
.cc-modern .section-header {
max-width: 780px;
margin: 0 auto 14px;
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.1;
font-weight: 700;
}
.cc-modern .section-header.white-text,
.cc-modern .cc-section-dark .section-header {
color: #fff;
}
.cc-modern .feature-big-heading {
font-size: clamp(21px, 2.1vw, 27px);
line-height: 1.22;
font-weight: 700;
margin-bottom: 10px;
}
.cc-modern .heading-accent {
font-weight: 700;
}
.cc-modern .feature-text-small,
.cc-modern .answer-text {
color: var(--cc-text-muted);
font-size: 17px;
line-height: 1.62;
}
/* gradient text helper */
.cc-modern .cc-grad-text {
background-image: var(--cc-grad-brand);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.cc-modern .cc-section-dark .cc-grad-text,
.cc-modern .cc-hero .cc-grad-text {
background-image: var(--cc-grad-bright);
}
/* --------------------------------------------------------------------------
2b. Brand colour shift
Anything wearing the brand gradient slowly travels through the full ramp
(violet -> plum -> magenta -> pink -> blue -> violet). One shared keyframe,
staggered durations so the page doesn't pulse in unison.
-------------------------------------------------------------------------- */
@keyframes ccBrandShift {
from { background-position: 0% 50%; }
to { background-position: 300% 50%; }
}
/* These are deliberately prefixed .body.cc-modern rather than .cc-modern: it
outranks every component rule below, so the cycling ramp can't be silently
replaced by a later `background-image` at equal specificity. That is exactly
what happened before — the buttons kept tiling a 115deg gradient and showed a
hard seam, because the section 3 button rule came later in this file. */
.body.cc-modern .cc-grad-text,
.body.cc-modern .gradient-button,
.body.cc-modern .button.gradient-button,
.body.cc-modern .cc-eyebrow-dot,
.body.cc-modern .cc-notice-badge,
.body.cc-modern .watchTutorialBtn .icon_holder,
.body.cc-modern .cc-cardgrid > .feature-big::before {
background-image: var(--cc-grad-cycle);
background-size: 300% 100%;
background-position: 0% 50%;
animation: ccBrandShift 66s linear infinite;
}
/* on the dark sections the ramp uses the lighter tints so text stays legible */
.body.cc-modern .cc-section-dark .cc-grad-text,
.body.cc-modern .cc-hero .cc-grad-text,
.body.cc-modern .cc-section-dark .cc-eyebrow-dot,
.body.cc-modern .cc-hero .cc-eyebrow-dot,
.body.cc-modern .cc-section-dark .watchTutorialBtn .icon_holder {
background-image: var(--cc-grad-cycle-bright);
}
/* stagger so the headline, buttons and accents drift out of phase */
.body.cc-modern .gradient-button,
.body.cc-modern .button.gradient-button {
animation-duration: 54s;
}
.body.cc-modern .cc-eyebrow-dot,
.body.cc-modern .watchTutorialBtn .icon_holder,
.body.cc-modern .cc-notice-badge {
animation-duration: 78s;
}
.body.cc-modern .cc-hero .cc-grad-text {
animation-duration: 90s;
}
/* section eyebrow — small capsule label above a heading */
.cc-modern .cc-eyebrow {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 7px 15px 7px 12px;
margin-bottom: 18px;
border-radius: 999px;
border: 1px solid var(--cc-line);
background: rgba(255, 255, 255, .7);
font-family: var(--cc-font-display);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--cc-text-muted);
line-height: 1;
white-space: nowrap;
}
/* In centred sections the eyebrow must break onto its own line — as an
inline-flex box it would otherwise sit beside a preceding inline image. */
.cc-modern .wrapper.center > .cc-eyebrow,
.cc-modern .cc-center > .cc-eyebrow {
display: flex;
width: -webkit-fit-content;
width: fit-content;
margin-left: auto;
margin-right: auto;
}
.cc-modern .cc-center {
text-align: center;
}
.cc-modern .cc-center .watchTutorialBtn {
margin-left: auto;
margin-right: auto;
}
.cc-modern .cc-eyebrow-dot {
width: 7px;
height: 7px;
border-radius: 50%;
box-shadow: 0 0 0 3px rgba(192, 38, 211, .16);
flex: none;
}
.cc-modern .cc-section-dark .cc-eyebrow,
.cc-modern .cc-hero .cc-eyebrow {
border-color: var(--cc-line-dark);
background: rgba(255, 255, 255, .08);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
color: rgba(255, 255, 255, .88);
}
.cc-modern .cc-section-dark .cc-eyebrow-dot,
.cc-modern .cc-hero .cc-eyebrow-dot {
background-image: var(--cc-grad-cyan);
box-shadow: 0 0 0 3px rgba(34, 211, 238, .22);
}
/* lead paragraph under a section header */
.cc-modern .cc-lead {
max-width: 720px;
margin: 0 auto;
font-size: clamp(17px, 1.6vw, 19px);
line-height: 1.6;
color: var(--cc-text-muted);
}
.cc-modern .cc-section-dark .cc-lead {
color: rgba(255, 255, 255, .82);
}
/* --------------------------------------------------------------------------
3. Buttons
-------------------------------------------------------------------------- */
.cc-modern .gradient-button,
.cc-modern .button.gradient-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: auto;
min-height: 52px;
padding: 14px 30px;
border-radius: 999px;
font-family: var(--cc-font-display);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
letter-spacing: .01em;
text-transform: none;
box-shadow: var(--cc-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
transition: transform .25s var(--cc-ease), box-shadow .25s var(--cc-ease);
}
.cc-modern .gradient-button:hover,
.cc-modern .button.gradient-button:hover {
transform: translateY(-2px);
box-shadow: 0 18px 48px -8px rgba(192, 38, 211, .68), inset 0 1px 0 rgba(255, 255, 255, .32);
}
.cc-modern .gradient-button:active {
transform: translateY(0);
}
/* secondary / ghost button */
.cc-modern .cc-btn-ghost {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 52px;
padding: 14px 26px;
border-radius: 999px;
border: 1px solid var(--cc-line-dark);
background: rgba(255, 255, 255, .07);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
color: #fff;
font-family: var(--cc-font-display);
font-size: 16px;
font-weight: 600;
text-decoration: none;
transition: background .25s var(--cc-ease), border-color .25s var(--cc-ease), transform .25s var(--cc-ease);
}
.cc-modern .cc-btn-ghost:hover {
background: rgba(255, 255, 255, .14);
border-color: rgba(255, 255, 255, .3);
transform: translateY(-2px);
color: #fff;
}
/* "Watch video" pill — restyled from the old glossy black button */
.cc-modern .watchTutorialBtn {
max-width: none;
width: -webkit-fit-content;
width: fit-content;
margin: 6px 0 18px;
padding: 9px 18px 9px 14px;
height: auto;
border-radius: 999px;
border: 1px solid var(--cc-line);
background: var(--cc-surface) !important;
color: var(--cc-text);
font-family: var(--cc-font-display);
font-size: 13.5px;
font-weight: 600;
letter-spacing: .01em;
box-shadow: var(--cc-shadow-sm);
transition: transform .22s var(--cc-ease), box-shadow .22s var(--cc-ease), border-color .22s var(--cc-ease);
}
.cc-modern .wrapper.center .watchTutorialBtn {
margin-left: auto;
margin-right: auto;
}
.cc-modern .watchTutorialBtn:before {
display: none;
}
.cc-modern .watchTutorialBtn:hover {
transform: translateY(-1px);
border-color: rgba(192, 38, 211, .4);
box-shadow: var(--cc-shadow-md);
}
.cc-modern .watchTutorialBtn a,
.cc-modern .watchTutorialBtn a:hover {
color: inherit;
display: inline-flex;
align-items: center;
gap: 9px;
}
.cc-modern .watchTutorialBtn .icon_holder {
width: 22px;
height: 22px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
/* site.css hangs a 233%-wide dark halo off .icon_holder:before — it sat outside
the new pill, so the gradient disc replaces it. */
.cc-modern .watchTutorialBtn .icon_holder:before {
display: none;
}
.cc-modern .watchTutorialBtn .icon_holder > svg,
.cc-modern .watchTutorialBtn .icon_holder svg {
position: static;
width: 8px;
height: 8px;
margin-left: 1px;
fill: #fff;
}
/* dark-background variant */
.cc-modern .cc-section-dark .watchTutorialBtn {
background: rgba(255, 255, 255, .1) !important;
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border-color: var(--cc-line-dark);
color: #fff;
box-shadow: none;
}
.cc-modern .cc-section-dark .watchTutorialBtn:hover {
background: rgba(255, 255, 255, .18) !important;
border-color: rgba(255, 255, 255, .3);
}
.cc-modern .cc-section-dark .watchTutorialBtn .icon_holder {
background-image: var(--cc-grad-cyan);
}
/* --------------------------------------------------------------------------
4. Navigation — fixed, transparent over the hero, glass once scrolled
-------------------------------------------------------------------------- */
.cc-modern .nav-section {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999;
padding: 10px 0;
background-color: transparent;
border-bottom: 1px solid transparent;
transition: background-color .3s var(--cc-ease), backdrop-filter .3s var(--cc-ease),
border-color .3s var(--cc-ease), padding .3s var(--cc-ease);
}
.cc-modern .nav-section.cc-nav-stuck {
padding: 4px 0;
background-color: rgba(12, 10, 32, .72);
-webkit-backdrop-filter: blur(20px) saturate(180%);
backdrop-filter: blur(20px) saturate(180%);
border-bottom-color: rgba(255, 255, 255, .1);
}
.cc-modern .nav-panel {
display: flex;
align-items: center;
gap: 16px;
}
.cc-modern .logo.w-nav-brand {
display: flex;
align-items: center;
gap: 14px;
}
/* site.css positions .logo absolutely at every width, and below 992px it also
right-aligns .nav-panel around it. Take the logo back into flow only on
desktop — where space-between then does the work — and leave the mobile
layout to site.css. */
@media screen and (min-width: 992px) {
.cc-modern .nav-panel {
justify-content: space-between;
}
.cc-modern .logo.w-nav-brand {
position: relative;
left: auto;
top: auto;
transform: none;
max-width: none;
}
}
/* .app-icon in site.css carries a 34px bottom margin from the old stacked
layout — it has to go for the icon and wordmark to sit on one centre line. */
.cc-modern #headerlogoico {
width: 52px;
height: auto;
margin: 0;
border-radius: 15px !important;
transition: width .3s var(--cc-ease);
}
/* The wrapper holds a display:block ![]()
plus surrounding whitespace, which
was adding ~34px of stray line boxes and pushing the wordmark off-centre.
line-height/font-size 0 collapses it to the icon's own height. */
.cc-modern #headerlogoico-wrap {
display: flex;
border-radius: 15px;
flex: none;
line-height: 0;
font-size: 0;
}
.cc-modern #headerlogoico-wrap::after {
border-radius: 15px 15px 40% 40%;
}
/* the logo wordmark carries an inline color/position — reset it here */
.cc-modern #headerlogotext {
position: static !important;
padding-top: 0 !important;
margin-left: 0 !important;
display: block !important;
font-family: var(--cc-font-display);
font-size: 25px !important;
font-weight: 700 !important;
letter-spacing: -.02em;
color: #fff !important;
line-height: 1;
text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
/* line-height:0 keeps the ™ out of the line box — otherwise it grows the box
upward and the wordmark no longer sits centred against the icon. */
.cc-modern #headerlogotext span {
position: relative !important;
top: -.6em !important;
font-size: 10px !important;
line-height: 0 !important;
color: rgba(255, 255, 255, .5) !important;
}
.cc-modern .nav-section .nav-menu {
gap: 10px;
}
/* Both nav buttons share one box so they match exactly. site.css uppercases
the "Create School Account" label — text-transform:none restores sentence case. */
.cc-modern .nav-panel-button,
.cc-modern .nav-section .gradient-button.nav-panel-button {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 44px;
min-height: 44px;
padding: 0 24px;
border-radius: 999px;
font-family: var(--cc-font-display);
font-size: 15px;
font-weight: 600;
line-height: 1;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
}
.cc-modern .button.nav-panel-button:not(.gradient-button) {
background-color: rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255, 255, 255, .18);
color: #fff;
transition: background-color .25s var(--cc-ease), border-color .25s var(--cc-ease);
}
.cc-modern .button.nav-panel-button:not(.gradient-button):hover {
background-color: rgba(255, 255, 255, .2);
border-color: rgba(255, 255, 255, .34);
}
/* --------------------------------------------------------------------------
5. Hero
-------------------------------------------------------------------------- */
.cc-modern .cc-hero {
position: relative;
isolation: isolate;
height: auto !important;
min-height: min(94vh, 900px);
display: flex;
align-items: center;
padding: clamp(130px, 17vh, 190px) 0 clamp(80px, 9vw, 120px) !important;
background-color: var(--cc-ink) !important;
background-image: linear-gradient(165deg, #0c0a20 0%, #1a1149 48%, #0c0a20 100%) !important;
overflow: hidden;
}
/* animated aurora field */
.cc-modern .cc-hero::before {
content: '';
position: absolute;
inset: -20%;
z-index: 0;
background:
radial-gradient(closest-side circle at 22% 30%, rgba(121, 40, 202, .72), transparent 100%),
radial-gradient(closest-side circle at 78% 26%, rgba(255, 0, 128, .52), transparent 100%),
radial-gradient(closest-side circle at 62% 88%, rgba(34, 211, 238, .34), transparent 100%),
radial-gradient(closest-side circle at 12% 82%, rgba(79, 70, 229, .48), transparent 100%);
filter: blur(50px);
animation: ccAurora 26s ease-in-out infinite alternate;
will-change: transform;
}
/* fine engineering grid + vignette */
.cc-modern .cc-hero::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
background-size: 68px 68px;
-webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, #000 30%, transparent 100%);
mask-image: radial-gradient(ellipse 75% 65% at 50% 42%, #000 30%, transparent 100%);
pointer-events: none;
}
@keyframes ccAurora {
0% { transform: translate3d(0, 0, 0) scale(1); }
50% { transform: translate3d(3%, -2%, 0) scale(1.08); }
100% { transform: translate3d(-3%, 2%, 0) scale(1.04); }
}
/* WebGL line field (js/hero-shader.js). Fades in only once the shader has
actually compiled, so a failure leaves the CSS treatment untouched. */
.cc-modern .cc-hero-shader {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
mix-blend-mode: screen;
opacity: 0;
transition: opacity 1.4s var(--cc-ease);
}
.cc-modern .cc-hero.cc-shader-on .cc-hero-shader {
opacity: 1;
}
/* the static grid steps back once the curves are carrying the motion */
.cc-modern .cc-hero.cc-shader-on::after {
opacity: .4;
}
.cc-modern .cc-hero-inner {
position: relative;
z-index: 2;
width: 100%;
}
.cc-modern .cc-hero-grid {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
gap: clamp(20px, 3.5vw, 48px);
align-items: center;
}
/* .hero from site.css is a flex row — reset it so the copy stacks */
.cc-modern .cc-hero-copy {
display: block;
width: 100%;
max-width: 640px;
padding-top: 0;
/* extra breathing room off the left edge, tapering away on small screens */
padding-left: clamp(0px, 3.4vw, 52px);
}
/* hero product shot */
.cc-modern .cc-hero-media {
position: relative;
min-width: 0;
isolation: isolate;
}
/* Sit the product shot 30px lower than the copy column, which stays put.
Offset via `top`, not `transform`: this element carries data-cc-reveal, and
the reveal's finished state sets `transform: none` at a higher specificity,
which would silently cancel a translateY here. `top` is untouched by it, and
unlike margin it doesn't shift the grid item's centring. */
@media screen and (min-width: 992px) {
.cc-modern .cc-hero-media {
top: 110px;
}
}
/* soft glow so the cut-out sits in the scene rather than on top of it */
.cc-modern .cc-hero-media::before {
content: '';
position: absolute;
z-index: -1;
left: 50%;
top: 50%;
width: 92%;
aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(192, 38, 211, .42), rgba(34, 211, 238, .16) 55%, transparent 72%);
filter: blur(30px);
}
.cc-modern .cc-hero-media img {
display: block;
width: 100%;
max-width: 600px;
height: auto;
margin-left: auto;
filter: drop-shadow(0 40px 55px rgba(0, 0, 0, .55));
}
.cc-modern .cc-hero-title {
margin: 0 0 20px;
font-family: var(--cc-font-display);
font-size: clamp(34px, 4.6vw, 56px);
line-height: 1.05;
font-weight: 800;
letter-spacing: -.03em;
color: #fff;
max-width: 100%;
}
.cc-modern .cc-hero-title .cc-hero-title-sub {
display: block;
margin-top: 6px;
font-size: clamp(21px, 2.7vw, 31px);
font-weight: 700;
letter-spacing: -.025em;
color: rgba(255, 255, 255, .95);
}
/* The rotating phrase changes length constantly. Putting it on its own line and
reserving two lines of height keeps the CTAs below from jumping. */
.cc-modern .cc-hero-sub {
margin: 0 0 30px;
max-width: 640px;
min-height: 3em;
font-size: clamp(18px, 2vw, 23px);
line-height: 1.5;
color: rgba(255, 255, 255, .8);
}
.cc-modern .cc-typewrite {
display: block;
min-height: 1.5em;
font-weight: 700;
color: #fff;
background-image: var(--cc-grad-cyan);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.cc-modern .cc-typewrite > .wrap {
border-right: .08em solid rgba(255, 255, 255, .65);
}
.cc-modern .cc-hero-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.cc-modern .cc-hero-actions .gradient-button {
margin: 0;
float: none;
}
/* plain text — no pill, border or backdrop */
.cc-modern .cc-hero-note {
display: block;
font-size: 16px;
line-height: 1.4;
color: rgba(255, 255, 255, .8);
}
.cc-modern .cc-hero-note strong {
color: #fff;
font-weight: 700;
}
/* live stats banner (populated by js/site.js) — kept in the dark top band */
.cc-modern #statbanner {
height: auto !important;
padding: 14px 20px !important;
line-height: 1.4 !important;
background-color: var(--cc-ink) !important;
background-image: linear-gradient(90deg, rgba(121, 40, 202, .45), rgba(255, 0, 128, .35)) !important;
box-shadow: none;
margin-bottom: 0;
border-bottom: 1px solid rgba(255, 255, 255, .1);
font-family: var(--cc-font-display);
font-size: 15px;
font-weight: 500;
letter-spacing: .01em;
color: rgba(255, 255, 255, .9) !important;
}
.cc-modern #statbanner b {
color: #fff;
font-weight: 700;
}
/* --------------------------------------------------------------------------
7. Section shells
-------------------------------------------------------------------------- */
.cc-modern .grey-section,
.cc-modern .white-section,
.cc-modern .background-section,
.cc-modern .gray-section {
padding-top: var(--cc-section-y);
padding-bottom: var(--cc-section-y);
}
.cc-modern .white-section {
background-color: var(--cc-surface);
box-shadow: none;
margin-bottom: 0;
}
.cc-modern .grey-section {
background-color: var(--cc-surface-2);
background-image:
radial-gradient(ellipse 60% 50% at 12% 0%, rgba(121, 40, 202, .07), transparent 70%),
radial-gradient(ellipse 55% 45% at 92% 12%, rgba(34, 211, 238, .08), transparent 70%);
}
/* dark "tech" sections */
.cc-modern .cc-section-dark {
position: relative;
isolation: isolate;
overflow: hidden;
background-color: var(--cc-ink) !important;
background-image: linear-gradient(160deg, #0c0a20 0%, #1a1149 55%, #0c0a20 100%) !important;
color: #fff;
}
.cc-modern .cc-section-dark::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 55% 45% at 82% 8%, rgba(255, 0, 128, .30), transparent 70%),
radial-gradient(ellipse 50% 45% at 10% 88%, rgba(34, 211, 238, .22), transparent 70%);
pointer-events: none;
}
.cc-modern .cc-section-dark::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
background-image:
linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
background-size: 68px 68px;
-webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 100%);
mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 20%, transparent 100%);
pointer-events: none;
}
.cc-modern .cc-section-dark > .wrapper,
.cc-modern .cc-section-dark > * {
position: relative;
z-index: 1;
}
.cc-modern .cc-section-dark .feature-text-small,
.cc-modern .cc-section-dark .cc-body-text {
color: rgba(255, 255, 255, .8);
}
/* two-column split layout used by the Explorer + Pets rows */
.cc-modern .cc-split {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(32px, 5vw, 64px);
align-items: center;
padding-top: 0;
}
.cc-modern .cc-split > .feature-big {
flex-basis: auto !important;
padding: 0 !important;
min-width: 0;
}
/* --------------------------------------------------------------------------
8. Card grid
-------------------------------------------------------------------------- */
.cc-modern .cc-cardgrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 26px;
padding-top: clamp(40px, 5vw, 62px);
align-items: stretch;
}
.cc-modern .cc-cardgrid > .feature-big {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-basis: auto !important;
padding: 28px 28px 32px !important;
border-radius: var(--cc-r-lg);
border: 1px solid var(--cc-line);
background: var(--cc-surface);
box-shadow: var(--cc-shadow-sm);
overflow: hidden;
transition: transform .35s var(--cc-ease), box-shadow .35s var(--cc-ease), border-color .35s var(--cc-ease);
}
/* gradient hairline that lights up on hover */
.cc-modern .cc-cardgrid > .feature-big::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
opacity: 0;
transition: opacity .35s var(--cc-ease);
}
.cc-modern .cc-cardgrid > .feature-big:hover {
transform: translateY(-6px);
border-color: rgba(192, 38, 211, .26);
box-shadow: var(--cc-shadow-lg);
}
.cc-modern .cc-cardgrid > .feature-big:hover::before {
opacity: 1;
}
/* Lead image: full card width on a tinted panel so it reads as the hero of
the card rather than an icon. */
.cc-modern .cc-cardgrid > .feature-big > .feature-screen,
.cc-modern .cc-cardgrid > .feature-big > img {
box-sizing: border-box;
display: block;
width: 100%;
max-width: 100%;
height: auto;
margin: 0 0 22px;
padding: 16px;
border-radius: var(--cc-r-md);
border: 1px solid var(--cc-line);
background-image: linear-gradient(150deg, rgba(121, 40, 202, .09), rgba(34, 211, 238, .09));
box-shadow: none;
transition: transform .4s var(--cc-ease);
}
.cc-modern .cc-cardgrid > .feature-big:hover > .feature-screen,
.cc-modern .cc-cardgrid > .feature-big:hover > img {
transform: scale(1.035);
}
.cc-modern .cc-cardgrid > .feature-big .feature-text-small {
margin-top: 4px;
}
/* the SSO cards use a for the logo + title lockup */
.cc-modern .cc-cardgrid > .feature-big table {
border-collapse: collapse;
margin-bottom: 6px;
}
.cc-modern .cc-cardgrid > .feature-big table td {
vertical-align: middle;
}
.cc-modern .cc-cardgrid > .feature-big table img {
max-width: 62px !important;
border-radius: var(--cc-r-sm) !important;
box-shadow: var(--cc-shadow-sm);
}
.cc-modern .cc-cardgrid > .feature-big table h3 {
margin: 0;
}
.cc-modern .cc-cardgrid a:not(.watchTutorialBtn):not(.gradient-button) {
color: var(--cc-violet);
font-weight: 600;
text-decoration: none;
border-bottom: 1px solid rgba(121, 40, 202, .3);
}
.cc-modern .cc-cardgrid a:not(.watchTutorialBtn):not(.gradient-button):hover {
border-bottom-color: var(--cc-violet);
}
/* --------------------------------------------------------------------------
9. Media frames (Explorer video, pets art)
-------------------------------------------------------------------------- */
.cc-modern .cc-media-frame {
position: relative;
border-radius: var(--cc-r-xl);
padding: 10px;
background: linear-gradient(150deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04));
border: 1px solid var(--cc-line-dark);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8);
}
.cc-modern .cc-media-frame > div {
border-radius: calc(var(--cc-r-xl) - 10px) !important;
overflow: hidden;
}
.cc-modern .cc-media-plain img {
display: block;
width: 100%;
height: auto;
padding-left: 0 !important;
border-radius: var(--cc-r-xl);
}
/* --------------------------------------------------------------------------
10. AI feature chips
-------------------------------------------------------------------------- */
.cc-modern .aifeature {
display: flex;
align-items: center;
gap: 12px;
margin-top: 12px;
padding: 15px 20px;
border-radius: var(--cc-r-md);
border: 1px solid var(--cc-line-dark);
background: rgba(255, 255, 255, .08) !important;
-webkit-backdrop-filter: blur(18px) saturate(160%);
backdrop-filter: blur(18px) saturate(160%);
box-shadow: none !important;
color: #fff;
font-family: var(--cc-font-display);
font-size: 16px;
font-weight: 600;
letter-spacing: -.01em;
transition: transform .3s var(--cc-ease), background .3s var(--cc-ease), border-color .3s var(--cc-ease);
}
.cc-modern .aifeature::before {
content: '';
width: 8px;
height: 8px;
flex: none;
border-radius: 50%;
background-image: var(--cc-grad-cyan);
box-shadow: 0 0 12px rgba(34, 211, 238, .8);
}
.cc-modern .aifeature:hover {
transform: translateX(5px);
background: rgba(255, 255, 255, .15) !important;
border-color: rgba(255, 255, 255, .3);
}
.cc-modern .pbubble {
border: 2px solid rgba(255, 255, 255, .18);
box-shadow: 0 18px 40px -10px rgba(0, 0, 0, .7);
}
/* --------------------------------------------------------------------------
11. Premium features slider
-------------------------------------------------------------------------- */
.cc-modern .review-v1 {
padding: 0 26px 30px;
border-radius: var(--cc-r-lg);
border: 1px solid var(--cc-line);
background-color: var(--cc-surface);
box-shadow: var(--cc-shadow-md);
transition: transform .35s var(--cc-ease), box-shadow .35s var(--cc-ease);
}
.cc-modern .review-v1:hover {
transform: translateY(-5px);
box-shadow: var(--cc-shadow-lg);
}
.cc-modern .review-v1-avatar {
width: 66px;
height: 66px;
border: 3px solid #fff;
background-color: #fff;
box-shadow: var(--cc-shadow-md);
}
.cc-modern .review-v1 .feature-screen {
border-radius: var(--cc-r-md);
box-shadow: var(--cc-shadow-sm);
}
.cc-modern .review-v1 .text-block-1 {
font-family: var(--cc-font-display);
letter-spacing: -.01em;
}
.cc-modern .review-v1 .review-author {
font-size: 15.5px;
line-height: 1.55;
color: var(--cc-text-muted) !important;
}
.cc-modern .reviews-nav-dots {
margin-top: 8px;
}
/* --------------------------------------------------------------------------
12. Notice strip (school safety)
-------------------------------------------------------------------------- */
.cc-modern .cc-notice {
padding: 0 !important;
background-color: var(--cc-surface) !important;
background-image: none !important;
border-top: 1px solid var(--cc-line);
border-bottom: 1px solid var(--cc-line);
}
.cc-modern .cc-notice .wrapper {
padding-top: 22px !important;
padding-bottom: 22px !important;
}
.cc-modern .cc-notice-inner {
display: inline-flex;
align-items: center;
gap: 14px;
max-width: 900px;
padding: 14px 24px;
border-radius: 999px;
border: 1px solid rgba(121, 40, 202, .16);
background: linear-gradient(115deg, rgba(121, 40, 202, .07), rgba(255, 0, 128, .07));
font-size: 16px;
line-height: 1.45;
color: var(--cc-text);
text-align: left;
}
.cc-modern .cc-notice-badge {
flex: none;
padding: 5px 12px;
border-radius: 999px;
font-family: var(--cc-font-display);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: #fff;
}
/* --------------------------------------------------------------------------
13. App store section
-------------------------------------------------------------------------- */
.cc-modern .cc-apps {
background: var(--cc-surface-2) !important;
background-image:
radial-gradient(ellipse 50% 60% at 20% 20%, rgba(79, 70, 229, .09), transparent 70%),
radial-gradient(ellipse 50% 60% at 82% 70%, rgba(255, 0, 128, .08), transparent 70%) !important;
}
.cc-modern .store-badges {
align-items: center;
gap: 26px;
padding-top: 30px;
flex-wrap: wrap;
}
.cc-modern .store-badges > div[style*="width:100px"] {
display: none;
}
/* --------------------------------------------------------------------------
14. FAQ
-------------------------------------------------------------------------- */
.cc-modern .questions-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
margin-bottom: 0;
padding-top: clamp(38px, 5vw, 56px);
-webkit-column-count: auto;
column-count: auto;
}
.cc-modern .question {
display: block;
width: auto;
padding: 24px 26px 26px;
border-radius: var(--cc-r-lg);
border: 1px solid var(--cc-line);
background: var(--cc-surface-2);
transition: border-color .3s var(--cc-ease), background .3s var(--cc-ease), transform .3s var(--cc-ease);
}
.cc-modern .question:hover {
transform: translateY(-3px);
border-color: rgba(192, 38, 211, .26);
background: var(--cc-surface);
box-shadow: var(--cc-shadow-sm);
}
.cc-modern .question-text {
margin: 0 0 9px;
font-size: 18px;
line-height: 1.32;
font-weight: 700;
}
.cc-modern .answer-text {
margin-left: 0;
font-size: 16px;
line-height: 1.6;
}
.cc-modern .answer-text a {
color: var(--cc-violet);
font-weight: 600;
}
/* the FAQ intro paragraph uses .question outside the grid — keep it plain */
.cc-modern .white-section > .wrapper > .question {
border: 0;
background: none;
padding-left: 0;
padding-right: 0;
}
/* --------------------------------------------------------------------------
15. Awards
-------------------------------------------------------------------------- */
.cc-modern .cc-awards {
background: var(--cc-surface) !important;
border-top: 1px solid var(--cc-line);
padding-top: clamp(48px, 6vw, 76px) !important;
padding-bottom: clamp(48px, 6vw, 76px) !important;
}
.cc-modern .cc-awards-inner {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 30px 56px;
}
.cc-modern .cc-awards-inner h2 {
margin: 0;
font-size: clamp(22px, 2.4vw, 30px);
font-weight: 700;
}
.cc-modern .cc-awards-inner img {
height: 120px;
width: auto;
}
/* --------------------------------------------------------------------------
16. Footer
-------------------------------------------------------------------------- */
.cc-modern .cc-footer {
background-color: var(--cc-ink) !important;
background-image: linear-gradient(180deg, #0c0a20 0%, #14102e 100%) !important;
border-top: 1px solid rgba(255, 255, 255, .08);
padding-top: 64px;
}
.cc-modern .cc-footer .footer-v2 {
gap: 40px;
padding-bottom: 44px;
}
.cc-modern .cc-footer h4 {
font-family: var(--cc-font-display);
font-size: 24px;
font-weight: 700;
letter-spacing: -.02em;
margin-bottom: 12px;
}
.cc-modern .cc-footer .footer-description {
color: rgba(255, 255, 255, .55) !important;
font-size: 15px;
line-height: 1.6;
}
.cc-modern .cc-footer .footer-link-v2 {
color: rgba(255, 255, 255, .78) !important;
font-family: var(--cc-font-display);
font-size: 16px;
font-weight: 500;
transition: color .2s var(--cc-ease);
}
.cc-modern .cc-footer .footer-link-v2:hover {
color: #fff !important;
text-decoration: none;
}
.cc-modern .cc-footer .footer-bottom-v2 {
padding-top: 26px;
border-top: 1px solid rgba(255, 255, 255, .1) !important;
color: rgba(255, 255, 255, .45) !important;
font-size: 14px;
line-height: 1.65;
}
.cc-modern .cc-footer .footer-bottom-v2 a,
.cc-modern .cc-footer .footer-bottom-v2 a:hover {
color: rgba(255, 255, 255, .72) !important;
}
.cc-modern .cc-footer .footer-store-badges {
display: flex;
align-items: center;
gap: 22px;
flex-wrap: wrap;
}
/* --------------------------------------------------------------------------
17. Scroll reveal (progressive enhancement — see home.html)
Elements are visible by default. The script adds .cc-pre to hide them only
once it is certain it can reveal them again, so a JS failure can never leave
content stuck invisible.
-------------------------------------------------------------------------- */
.cc-modern [data-cc-reveal] {
transition: opacity .7s var(--cc-ease), transform .7s var(--cc-ease);
}
.cc-modern [data-cc-reveal].cc-pre {
opacity: 0;
transform: translateY(22px);
}
.cc-modern [data-cc-reveal].cc-pre.cc-in {
opacity: 1;
transform: none;
}
/* --------------------------------------------------------------------------
18. Responsive
-------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {
.cc-modern .cc-split {
grid-template-columns: minmax(0, 1fr);
}
.cc-modern .cc-hero-grid {
grid-template-columns: minmax(0, 1fr);
gap: 12px;
}
.cc-modern .cc-hero-copy {
max-width: 100%;
}
.cc-modern .cc-hero-media img {
margin-right: auto;
max-width: 420px;
}
.cc-modern .cc-split .cc-split-media {
order: -1;
}
.cc-modern #headerlogotext {
font-size: 21px !important;
}
.cc-modern #headerlogoico {
width: 44px;
}
}
@media screen and (max-width: 767px) {
.cc-modern .cc-hero {
min-height: 0;
text-align: left;
}
/* keep the copy flush with the rest of the page on phones */
.cc-modern .cc-hero-copy {
padding-left: 0;
}
/* the eyebrow must wrap rather than run off the screen */
.cc-modern .cc-eyebrow {
white-space: normal;
line-height: 1.35;
font-size: 12px;
}
.cc-modern #headerlogoico {
width: 38px;
}
.cc-modern #headerlogotext {
font-size: 18px !important;
}
.cc-modern .nav-panel-button,
.cc-modern .nav-section .gradient-button.nav-panel-button {
height: 38px;
min-height: 38px;
padding: 0 15px;
font-size: 13px;
}
.cc-modern .cc-hero-actions {
flex-direction: column;
align-items: stretch;
}
.cc-modern .cc-hero-actions .gradient-button,
.cc-modern .cc-btn-ghost {
width: 100%;
}
.cc-modern .cc-notice-inner {
flex-direction: column;
align-items: flex-start;
border-radius: var(--cc-r-lg);
text-align: left;
}
.cc-modern .cc-awards-inner img {
height: 92px;
}
.cc-modern .cc-footer .footer-v2 {
flex-direction: column;
}
.cc-modern .cc-footer .footer-right-links {
width: 100%;
text-align: left;
padding-left: 0;
}
.cc-modern .cc-footer .footer-link-v2 {
float: none;
display: block;
}
}
/* On small phones site.css stacks the two nav buttons in a column, which makes
the (now fixed) bar tall enough to cover the hero. Drop the wordmark and put
the buttons back on one row so the bar stays a single compact line. */
@media screen and (max-width: 560px) {
.cc-modern #headerlogotext {
display: none !important;
}
.cc-modern .nav-section .w-nav-menu {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
align-items: center;
gap: 8px;
}
.cc-modern .nav-panel {
flex-wrap: nowrap;
min-height: 0;
padding-top: 8px;
padding-bottom: 8px;
}
.cc-modern #headerlogoico {
width: 40px;
}
.cc-modern .cc-hero {
padding-top: 110px !important;
}
}
/* --------------------------------------------------------------------------
19. Motion + contrast preferences
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.cc-modern .cc-hero::before {
animation: none;
}
.cc-modern *,
.cc-modern *::before,
.cc-modern *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
.cc-modern [data-cc-reveal].cc-pre {
opacity: 1;
transform: none;
}
}