Dynamic Ribbon Underlay
The signature white "swoosh" that has framed Coca-Cola since 1969, reproduced as a pure-CSS curved accent sweeping beneath hero content.
.coke-ribbon {
position: relative;
isolation: isolate;
padding: 96px 32px;
background: #F40009;
color: #FFFFFF;
overflow: hidden;
}
.coke-ribbon::before {
content: "";
position: absolute;
inset: auto -10% -20% -10%;
height: 60%;
background: #FFFFFF;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
transform: rotate(-4deg) translateY(30%);
box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.12);
z-index: -1;
}
Contour-Bottle Card Silhouette
A pinched, double-curve card shape that nods to the 1915 contour bottle, rendered with CSS `border-radius` shorthand for soft organic asymmetry.
.contour-card {
background: #FFF5E1;
color: #1A1A1A;
padding: 32px 28px;
border-radius: 48px 48px 24px 24px / 64px 64px 28px 28px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transition: transform 250ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 250ms ease-out;
}
.contour-card:hover {
transform: translateY(-2px) rotate(-0.5deg);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}
Condensation Glass CTA
The "ice-cold" product photo effect applied to a call-to-action: a pure-white button that reads as a frosted, sweating bottle label on the red ground.
.coke-cta {
display: inline-flex;
align-items: center;
gap: 8px;
height: 56px;
padding: 0 32px;
font: 700 18px/1 "Poppins", sans-serif;
color: #F40009;
background: linear-gradient(180deg, #FFFFFF 0%, #FFF5E1 100%);
border: none;
border-radius: 12px;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 4px 12px rgba(0, 0, 0, 0.15),
0 0 0 0 rgba(255, 245, 225, 0);
transition: box-shadow 250ms ease-out, transform 120ms ease-out;
}
.coke-cta:hover {
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 10px 24px rgba(0, 0, 0, 0.22),
0 0 0 6px rgba(255, 245, 225, 0.35);
}