Tiffany Blue Full-Bleed Panel
A signature brand moment: full-viewport-width sections in solid Tiffany Blue with white serif typography, creating the digital equivalent of opening the blue box.
.tiffany-panel {
background-color: #0ABAB5;
color: #FFFFFF;
width: 100vw;
margin-left: calc(-50vw + 50%);
padding: 96px 24px;
text-align: center;
}
.tiffany-panel h2 {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 3rem;
font-weight: 300;
letter-spacing: 0.02em;
margin-bottom: 16px;
}
Jewelry Card Frame
Product cards that present items like precious objects in a shadowbox — minimal border, soft shadow, generous internal padding, with serif overlay text.
.jewelry-card {
background: #FFFFFF;
border: 1px solid #EFEFEF;
border-radius: 8px;
padding: 0;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
transition: box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
.jewelry-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.jewelry-card .card-body {
padding: 24px;
font-family: 'Spectral', Georgia, serif;
}
.jewelry-card .card-title {
font-family: 'Cormorant Garamond', Georgia, serif;
font-size: 1.25rem;
font-weight: 500;
letter-spacing: 0.02em;
color: #1A1A1A;
}
Tiffany Focus Ring
A distinctive focus indicator using the brand's trademark blue — subtle enough for luxury polish, visible enough for accessibility.
.tiffany-focus:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(10, 186, 181, 0.30);
border-color: #0ABAB5;
transition: box-shadow 120ms ease-out, border-color 120ms ease-out;
}