/* * Jewelry nav icons — curated subsets of four in-repo jewelry webfonts exposed * under the nav icon prefixes so they can be picked in the nav editor and * rendered on the storefront. * * A nav item's icon VALUE (e.g. "ring-solitaire") renders as `.icon-` on * the storefront (html/nav/main.php) and `.navicn-` in the SiteManager * nav editor (the `.icon-`->`.navicn-` rewrite). None of the general icon fonts * ship these glyphs, and the four sets are namespaced (ring- / dia- / band- / * plain hyperion) so they never collide with each other or the store font. * font-family is forced per glyph so it wins over the general font's base rule. * * This file lives at fonts/ so every @font-face url is relative to fonts/ — the * storefront resolves them directly, and the editor inline-loads it with * a single `url('` -> `url('fonts/` rewrite (see edit-content- * navigation/main.php). Codepoints mirror each font's own stylesheet verbatim. */ /* ---- @font-face (relative to fonts/) ------------------------------------- */ @font-face { font-family: 'hyperion'; src: url('hyperion/fonts/hyperion.woff') format('woff'), url('hyperion/fonts/hyperion.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'ring-settings'; src: url('ring-settings/fonts/ring-settings.woff') format('woff'), url('ring-settings/fonts/ring-settings.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'diashapes'; src: url('diamond-shapes/fonts/diashapes-v6.woff') format('woff'), url('diamond-shapes/fonts/diashapes-v6.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: 'wedding-bands'; src: url('wedding-bands/fonts/wedding-bands.woff') format('woff'), url('wedding-bands/fonts/wedding-bands.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* ---- Jewelry (Hyperion) -------------------------------------------------- */ .icon-ring:before, .navicn-ring:before { font-family: 'hyperion' !important; content: "\e925"; } .icon-engagement-ring:before, .navicn-engagement-ring:before { font-family: 'hyperion' !important; content: "\e907"; } .icon-engagement:before, .navicn-engagement:before { font-family: 'hyperion' !important; content: "\e943"; } .icon-ring-size:before, .navicn-ring-size:before { font-family: 'hyperion' !important; content: "\e91c"; } .icon-necklace:before, .navicn-necklace:before { font-family: 'hyperion' !important; content: "\e905"; } .icon-pendant:before, .navicn-pendant:before { font-family: 'hyperion' !important; content: "\e906"; } .icon-earring:before, .navicn-earring:before { font-family: 'hyperion' !important; content: "\e909"; } .icon-bracelet:before, .navicn-bracelet:before { font-family: 'hyperion' !important; content: "\e90b"; } .icon-bangle:before, .navicn-bangle:before { font-family: 'hyperion' !important; content: "\e90c"; } .icon-diamond:before, .navicn-diamond:before { font-family: 'hyperion' !important; content: "\e903"; } .icon-diamond-search:before, .navicn-diamond-search:before { font-family: 'hyperion' !important; content: "\e95b"; } .icon-gemstone:before, .navicn-gemstone:before { font-family: 'hyperion' !important; content: "\e904"; } .icon-watch:before, .navicn-watch:before { font-family: 'hyperion' !important; content: "\e941"; } .icon-metal:before, .navicn-metal:before { font-family: 'hyperion' !important; content: "\e900"; } /* ---- Ring Styles (ring-settings) ----------------------------------------- */ .icon-ring-solitaire:before, .navicn-ring-solitaire:before { font-family: 'ring-settings' !important; content: "\e907"; } .icon-ring-halo:before, .navicn-ring-halo:before { font-family: 'ring-settings' !important; content: "\e902"; } .icon-ring-threestone:before, .navicn-ring-threestone:before { font-family: 'ring-settings' !important; content: "\e90a"; } .icon-ring-pave:before, .navicn-ring-pave:before { font-family: 'ring-settings' !important; content: "\e903"; } .icon-ring-vintage:before, .navicn-ring-vintage:before { font-family: 'ring-settings' !important; content: "\e90b"; } .icon-ring-channel-set:before, .navicn-ring-channel-set:before { font-family: 'ring-settings' !important; content: "\e901"; } .icon-ring-bypass:before, .navicn-ring-bypass:before { font-family: 'ring-settings' !important; content: "\e900"; } .icon-ring-sidestone:before, .navicn-ring-sidestone:before { font-family: 'ring-settings' !important; content: "\e905"; } .icon-ring-splitshank:before, .navicn-ring-splitshank:before { font-family: 'ring-settings' !important; content: "\e908"; } .icon-ring-tension:before, .navicn-ring-tension:before { font-family: 'ring-settings' !important; content: "\e909"; } /* ---- Diamond Shapes (diashapes) ------------------------------------------ */ .icon-dia-round:before, .navicn-dia-round:before { font-family: 'diashapes' !important; content: "\e900"; } .icon-dia-princess:before, .navicn-dia-princess:before { font-family: 'diashapes' !important; content: "\e901"; } .icon-dia-emerald:before, .navicn-dia-emerald:before { font-family: 'diashapes' !important; content: "\e902"; } .icon-dia-asscher:before, .navicn-dia-asscher:before { font-family: 'diashapes' !important; content: "\e903"; } .icon-dia-radiant:before, .navicn-dia-radiant:before { font-family: 'diashapes' !important; content: "\e904"; } .icon-dia-cushion:before, .navicn-dia-cushion:before { font-family: 'diashapes' !important; content: "\e905"; } .icon-dia-oval:before, .navicn-dia-oval:before { font-family: 'diashapes' !important; content: "\e906"; } .icon-dia-pear:before, .navicn-dia-pear:before { font-family: 'diashapes' !important; content: "\e907"; } .icon-dia-marquise:before, .navicn-dia-marquise:before { font-family: 'diashapes' !important; content: "\e908"; } .icon-dia-heart:before, .navicn-dia-heart:before { font-family: 'diashapes' !important; content: "\e909"; } .icon-dia-trillion:before, .navicn-dia-trillion:before { font-family: 'diashapes' !important; content: "\e90a"; } .icon-dia-baguette:before, .navicn-dia-baguette:before { font-family: 'diashapes' !important; content: "\e90b"; } /* ---- Wedding Bands (wedding-bands) --------------------------------------- */ .icon-band-vintage:before, .navicn-band-vintage:before { font-family: 'wedding-bands' !important; content: "\e900"; } .icon-band-classic:before, .navicn-band-classic:before { font-family: 'wedding-bands' !important; content: "\e901"; } .icon-band-plain:before, .navicn-band-plain:before { font-family: 'wedding-bands' !important; content: "\e902"; } .icon-band-gemstone:before, .navicn-band-gemstone:before { font-family: 'wedding-bands' !important; content: "\e903"; } .icon-band-contour:before, .navicn-band-contour:before { font-family: 'wedding-bands' !important; content: "\e904"; } .icon-band-diamond:before, .navicn-band-diamond:before { font-family: 'wedding-bands' !important; content: "\e905"; }