@sublimee/surfaces 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Juan Figueroa
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,116 @@
+# @sublimee/surfaces
+
+Surface container components for the Sublime design system.
+
+## Installation
+
+```bash
+npm install @sublimee/surfaces
+```
+
+## Quick Start
+
+```tsx
+import { Surface } from '@sublimee/surfaces';
+import '@sublimee/surfaces/surface.css';
+
+// Basic usage
+<Surface>
+  Your content here
+</Surface>
+
+// With options
+<Surface 
+  variant="elevated"
+  padding="lg"
+  radius="xl"
+  border
+  interactive
+>
+  <h2>Card Title</h2>
+  <p>Card content goes here</p>
+</Surface>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'base' \| 'elevated' \| 'higher' \| 'inset' \| 'glass'` | `'elevated'` | Visual elevation variant |
+| `padding` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | `'md'` | Internal padding |
+| `radius` | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` | `'lg'` | Border radius |
+| `border` | `boolean` | `false` | Show border |
+| `interactive` | `boolean` | `true` | Enable hover shadow lift |
+| `as` | `keyof JSX.IntrinsicElements` | `'div'` | HTML element to render |
+
+## Variants
+
+- **`base`**: No elevation, for page-level containers
+- **`elevated`**: Card-level elevation (default)
+- **`higher`**: Modal/dropdown elevation
+- **`inset`**: Depressed surface, for input wells
+- **`glass`**: Frosted glass effect with backdrop blur
+
+### Glass Variant
+
+The `glass` variant creates a frosted glass effect using `backdrop-filter`. It's designed to be used over colorful or photographic backgrounds.
+
+```tsx
+<Surface variant="glass" padding="lg">
+  <h2>Glass Card</h2>
+  <p>Content over a colorful background</p>
+</Surface>
+```
+
+**Important:** The glass surface is semi-transparent and does not modify text styling. You are responsible for ensuring text readability:
+
+- Use text shadows: `text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5)`
+- Choose high-contrast text colors for your background
+- Add a subtle backdrop behind text content
+
+Browser support: Glass uses `backdrop-filter` which is supported in all modern browsers. In unsupported browsers, the surface will fall back to a solid semi-transparent background.
+
+### Glass Utility Class
+
+For simple use cases, apply the glass effect directly with a CSS class:
+
+```html
+<div class="sublime-glassed">
+  Instant glass effect
+</div>
+```
+
+This is the same glass styling as the Surface component, but without the additional padding, radius options, or interactive states. Use it when you need:
+
+- Quick glass effect without component overhead
+- Custom padding/radius via your own styles
+- Glass effect on elements that aren't "surfaces" (e.g., overlays, backdrops)
+
+Both `sublime-glassed` and `variant="glass"` respect dark mode automatically.
+
+## Theming
+
+For full theming support including dark mode, also import the tokens:
+
+```tsx
+import '@sublimee/tokens/tokens.css';
+import '@sublimee/surfaces/surface.css';
+```
+
+The surface component uses these CSS custom properties:
+
+- `--sublime-color-surface-*` for background colors
+- `--sublime-shadow-*` for elevation shadows
+- `--sublime-radius-*` for border radius
+- `--sublime-space-*` for padding
+- `--sublime-color-border-primary` for borders
+
+## Polymorphic Usage
+
+Render as different HTML elements for semantic markup:
+
+```tsx
+<Surface as="article">Blog post content</Surface>
+<Surface as="section">Section content</Surface>
+<Surface as="aside">Sidebar content</Surface>
+```

package/dist/index.d.mts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+/** Available surface elevation variants */
+type SurfaceVariant = 'base' | 'elevated' | 'higher' | 'inset' | 'extruded' | 'glass';
+/** Available padding sizes */
+type SurfacePadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/** Available border radius sizes */
+type SurfaceRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Valid HTML element names for polymorphic rendering */
+type SurfaceElement = 'div' | 'article' | 'section' | 'aside' | 'main' | 'header' | 'footer' | 'nav';
+/** Props for the Surface component */
+interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual elevation variant. @default 'elevated' */
+    variant?: SurfaceVariant;
+    /** Internal padding. @default 'md' */
+    padding?: SurfacePadding;
+    /** Border radius. @default 'lg' */
+    radius?: SurfaceRadius;
+    /** Show border. @default false */
+    border?: boolean;
+    /** Enable interactive hover shadow lift. @default true */
+    interactive?: boolean;
+    /** HTML element to render. @default 'div' */
+    as?: SurfaceElement;
+    /** Child elements */
+    children?: React.ReactNode;
+}
+/**
+ * Surface component - A semantic container that wraps content with
+ * elevation, padding, and visual boundaries.
+ *
+ * @example
+ * ```tsx
+ * <Surface variant="elevated" padding="lg">
+ *   <h2>Card Title</h2>
+ *   <p>Card content</p>
+ * </Surface>
+ * ```
+ */
+declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Surface, type SurfaceElement, type SurfacePadding, type SurfaceProps, type SurfaceRadius, type SurfaceVariant };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import * as React from 'react';
+
+/** Available surface elevation variants */
+type SurfaceVariant = 'base' | 'elevated' | 'higher' | 'inset' | 'extruded' | 'glass';
+/** Available padding sizes */
+type SurfacePadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+/** Available border radius sizes */
+type SurfaceRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/** Valid HTML element names for polymorphic rendering */
+type SurfaceElement = 'div' | 'article' | 'section' | 'aside' | 'main' | 'header' | 'footer' | 'nav';
+/** Props for the Surface component */
+interface SurfaceProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Visual elevation variant. @default 'elevated' */
+    variant?: SurfaceVariant;
+    /** Internal padding. @default 'md' */
+    padding?: SurfacePadding;
+    /** Border radius. @default 'lg' */
+    radius?: SurfaceRadius;
+    /** Show border. @default false */
+    border?: boolean;
+    /** Enable interactive hover shadow lift. @default true */
+    interactive?: boolean;
+    /** HTML element to render. @default 'div' */
+    as?: SurfaceElement;
+    /** Child elements */
+    children?: React.ReactNode;
+}
+/**
+ * Surface component - A semantic container that wraps content with
+ * elevation, padding, and visual boundaries.
+ *
+ * @example
+ * ```tsx
+ * <Surface variant="elevated" padding="lg">
+ *   <h2>Card Title</h2>
+ *   <p>Card content</p>
+ * </Surface>
+ * ```
+ */
+declare const Surface: React.ForwardRefExoticComponent<SurfaceProps & React.RefAttributes<HTMLDivElement>>;
+
+export { Surface, type SurfaceElement, type SurfacePadding, type SurfaceProps, type SurfaceRadius, type SurfaceVariant };

package/dist/index.js

@@ -0,0 +1,99 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Surface: () => Surface
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/surface.tsx
+var React = __toESM(require("react"));
+var paddingMap = {
+  none: "0",
+  sm: "var(--sublime-space-3)",
+  // 12px
+  md: "var(--sublime-space-card-padding)",
+  // 24px (space-6)
+  lg: "var(--sublime-space-8)",
+  // 32px
+  xl: "var(--sublime-space-10)"
+  // 40px
+};
+var radiusMap = {
+  none: "var(--sublime-radius-none)",
+  sm: "var(--sublime-radius-sm)",
+  md: "var(--sublime-radius-md)",
+  lg: "var(--sublime-radius-lg)",
+  xl: "var(--sublime-radius-xl)",
+  full: "var(--sublime-radius-full)"
+};
+var Surface = React.forwardRef((props, ref) => {
+  const {
+    variant = "elevated",
+    padding = "md",
+    radius = "lg",
+    border = false,
+    interactive = true,
+    as: Component = "div",
+    children,
+    className = "",
+    style,
+    ...rest
+  } = props;
+  const classes = [
+    "sublime-surface",
+    `sublime-surface--${variant}`,
+    interactive ? "sublime-surface--interactive" : "",
+    border ? "sublime-surface--border" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const inlineStyles = {
+    padding: paddingMap[padding],
+    borderRadius: radiusMap[radius],
+    ...style
+  };
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: inlineStyles,
+      ...rest
+    },
+    children
+  );
+});
+Surface.displayName = "Surface";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Surface
+});

package/dist/index.mjs

@@ -0,0 +1,63 @@
+"use client";
+
+// src/surface.tsx
+import * as React from "react";
+var paddingMap = {
+  none: "0",
+  sm: "var(--sublime-space-3)",
+  // 12px
+  md: "var(--sublime-space-card-padding)",
+  // 24px (space-6)
+  lg: "var(--sublime-space-8)",
+  // 32px
+  xl: "var(--sublime-space-10)"
+  // 40px
+};
+var radiusMap = {
+  none: "var(--sublime-radius-none)",
+  sm: "var(--sublime-radius-sm)",
+  md: "var(--sublime-radius-md)",
+  lg: "var(--sublime-radius-lg)",
+  xl: "var(--sublime-radius-xl)",
+  full: "var(--sublime-radius-full)"
+};
+var Surface = React.forwardRef((props, ref) => {
+  const {
+    variant = "elevated",
+    padding = "md",
+    radius = "lg",
+    border = false,
+    interactive = true,
+    as: Component = "div",
+    children,
+    className = "",
+    style,
+    ...rest
+  } = props;
+  const classes = [
+    "sublime-surface",
+    `sublime-surface--${variant}`,
+    interactive ? "sublime-surface--interactive" : "",
+    border ? "sublime-surface--border" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const inlineStyles = {
+    padding: paddingMap[padding],
+    borderRadius: radiusMap[radius],
+    ...style
+  };
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: classes,
+      style: inlineStyles,
+      ...rest
+    },
+    children
+  );
+});
+Surface.displayName = "Surface";
+export {
+  Surface
+};

package/dist/surface.css

@@ -0,0 +1,261 @@
+/**
+ * @sublimee/surfaces
+ * Runtime styles for Surface components
+ *
+ * These styles provide the visual foundation that works independently
+ * of the token system. For full theming (colors, shadows, dark mode),
+ * import `@sublimee/tokens/tokens.css` in your application.
+ */
+
+/* ============================================================================
+   BASE SURFACE STYLES
+   ============================================================================ */
+
+.sublime-surface {
+  /* Layout */
+  box-sizing: border-box;
+  max-width: 100%;
+  width: 100%;
+
+  /* Default transition for interactive states */
+  transition:
+    box-shadow var(--sublime-duration-fast, 150ms) var(--sublime-ease-out, ease-out),
+    transform var(--sublime-duration-fast, 150ms) var(--sublime-ease-out, ease-out);
+}
+
+/* ============================================================================
+   VARIANT STYLES
+   ============================================================================ */
+
+/* Base - No elevation, page-level containers */
+.sublime-surface--base {
+  background-color: var(--sublime-color-surface-0, #ffffff);
+  box-shadow: var(--sublime-shadow-none, 0 0 #0000);
+}
+
+/* Elevated - Cards, content blocks (default) */
+.sublime-surface--elevated {
+  background-color: var(--sublime-color-surface-1, #ffffff);
+  box-shadow: var(--sublime-shadow-card, 0 1px 3px 0 rgb(0 0 0 / 0.1));
+}
+
+/* Higher - Modals, dropdowns, menus */
+.sublime-surface--higher {
+  background-color: var(--sublime-color-surface-2, #f9fafb);
+  box-shadow: var(--sublime-shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+}
+
+/* Inset - Depressed surfaces, input wells */
+.sublime-surface--inset {
+  background-color: var(--sublime-color-surface-inset, #f3f4f6);
+  box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
+}
+
+/* Extruded - 3D box effect with stacked shadows */
+.sublime-surface--extruded {
+  /* Extrusion depth */
+  --sublime-surface-extrude-depth: 6px;
+  --sublime-surface-extrude-border-light: #E4E4E8;
+  --sublime-surface-extrude-shadow-1: #EBEBEF;
+  --sublime-surface-extrude-shadow-2: #E6E6EA;
+  --sublime-surface-extrude-shadow-3: #E0E0E6;
+  --sublime-surface-extrude-shadow-4: #DADAE0;
+  --sublime-surface-extrude-shadow-5: #D4D4DA;
+  --sublime-surface-extrude-shadow-6: #CECED4;
+
+  background-color: var(--sublime-color-surface-1, #ffffff);
+
+  /* Float up-left to create space for extrusion */
+  transform: translate(calc(-1 * var(--sublime-surface-extrude-depth)), calc(-1 * var(--sublime-surface-extrude-depth)));
+
+  /* Only top/left borders - bottom/right are defined by shadows */
+  border-top: 1px solid var(--sublime-surface-extrude-border-light);
+  border-left: 1px solid var(--sublime-surface-extrude-border-light);
+  border-right: none;
+  border-bottom: none;
+
+  /* Allow shadows to extend beyond surface */
+  overflow: visible;
+
+  /* Stacked shadows create 3D side faces */
+  box-shadow:
+    1px 1px 0 var(--sublime-surface-extrude-shadow-1),
+    2px 2px 0 var(--sublime-surface-extrude-shadow-2),
+    3px 3px 0 var(--sublime-surface-extrude-shadow-3),
+    4px 4px 0 var(--sublime-surface-extrude-shadow-4),
+    5px 5px 0 var(--sublime-surface-extrude-shadow-5),
+    var(--sublime-surface-extrude-depth) var(--sublime-surface-extrude-depth) 0 var(--sublime-surface-extrude-shadow-6);
+}
+
+/* Interactive extruded - press effect */
+.sublime-surface--interactive.sublime-surface--extruded {
+  cursor: pointer;
+}
+
+.sublime-surface--interactive.sublime-surface--extruded:hover {
+  transform: translate(calc(-1 * var(--sublime-surface-extrude-depth) + 1px), calc(-1 * var(--sublime-surface-extrude-depth) + 1px));
+  box-shadow:
+    1px 1px 0 var(--sublime-surface-extrude-shadow-1),
+    2px 2px 0 var(--sublime-surface-extrude-shadow-2),
+    3px 3px 0 var(--sublime-surface-extrude-shadow-3),
+    4px 4px 0 var(--sublime-surface-extrude-shadow-4),
+    5px 5px 0 var(--sublime-surface-extrude-shadow-5),
+    calc(var(--sublime-surface-extrude-depth) - 1px) calc(var(--sublime-surface-extrude-depth) - 1px) 0 var(--sublime-surface-extrude-shadow-6);
+}
+
+.sublime-surface--interactive.sublime-surface--extruded:active {
+  transform: translate(0, 0);
+  box-shadow: none;
+  border-top-color: var(--sublime-surface-extrude-border-light);
+  border-left-color: var(--sublime-surface-extrude-border-light);
+}
+
+/* ============================================================================
+   INTERACTIVE STATES
+   ============================================================================ */
+
+/* Interactive surfaces lift on hover */
+.sublime-surface--interactive.sublime-surface--elevated:hover {
+  box-shadow: var(--sublime-shadow-card-hover, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+  transform: translateY(-1px);
+}
+
+.sublime-surface--interactive.sublime-surface--higher:hover {
+  box-shadow: var(--sublime-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+  transform: translateY(-1px);
+}
+
+/* No hover effect for base and inset variants */
+.sublime-surface--interactive.sublime-surface--base:hover,
+.sublime-surface--interactive.sublime-surface--inset:hover {
+  transform: none;
+}
+
+/* ============================================================================
+   BORDER STYLES
+   ============================================================================ */
+
+.sublime-surface--border {
+  border: 1px solid var(--sublime-color-border-surface, #d1d5db);
+}
+
+/* ============================================================================
+   DARK MODE OVERRIDES - Non-glass variants
+   ============================================================================ */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--base {
+    background-color: var(--sublime-color-surface-0, #0f0f0f);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--elevated {
+    background-color: var(--sublime-color-surface-1, #171717);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--higher {
+    background-color: var(--sublime-color-surface-2, #262626);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--inset {
+    background-color: var(--sublime-color-surface-inset, #0a0a0a);
+  }
+
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--border {
+    border-color: var(--sublime-color-border-primary, #404040);
+  }
+}
+
+/* Class-based dark mode */
+.dark .sublime-surface--base,
+[data-theme="dark"] .sublime-surface--base {
+  background-color: var(--sublime-color-surface-0, #0f0f0f);
+}
+
+.dark .sublime-surface--elevated,
+[data-theme="dark"] .sublime-surface--elevated {
+  background-color: var(--sublime-color-surface-1, #171717);
+}
+
+.dark .sublime-surface--higher,
+[data-theme="dark"] .sublime-surface--higher {
+  background-color: var(--sublime-color-surface-2, #262626);
+}
+
+.dark .sublime-surface--inset,
+[data-theme="dark"] .sublime-surface--inset {
+  background-color: var(--sublime-color-surface-inset, #0a0a0a);
+}
+
+.dark .sublime-surface--border,
+[data-theme="dark"] .sublime-surface--border {
+  border-color: var(--sublime-color-border-surface, #525252);
+}
+
+/* Dark mode - extruded variant */
+.dark .sublime-surface--extruded,
+[data-theme="dark"] .sublime-surface--extruded {
+  --sublime-surface-extrude-border-light: #E8E8F0;
+  --sublime-surface-extrude-shadow-1: #3A3A42;
+  --sublime-surface-extrude-shadow-2: #36363E;
+  --sublime-surface-extrude-shadow-3: #32323A;
+  --sublime-surface-extrude-shadow-4: #2E2E36;
+  --sublime-surface-extrude-shadow-5: #2A2A32;
+  --sublime-surface-extrude-shadow-6: #26262E;
+  background-color: var(--sublime-color-surface-1, #171717);
+}
+
+/* Media query dark mode for extruded */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--extruded {
+    --sublime-surface-extrude-border-light: #E8E8F0;
+    --sublime-surface-extrude-shadow-1: #3A3A42;
+    --sublime-surface-extrude-shadow-2: #36363E;
+    --sublime-surface-extrude-shadow-3: #32323A;
+    --sublime-surface-extrude-shadow-4: #2E2E36;
+    --sublime-surface-extrude-shadow-5: #2A2A32;
+    --sublime-surface-extrude-shadow-6: #26262E;
+    background-color: var(--sublime-color-surface-1, #171717);
+  }
+}
+
+/* ============================================================================
+   GLASS UTILITY - Standalone frosted glass effect
+   ============================================================================ */
+
+/**
+ * sublime-glassed - Utility class for instant glass effect on any element
+ *
+ * Usage: <div class="sublime-glassed">Content</div>
+ * Or with Surface: <Surface variant="glass">Content</Surface>
+ *
+ * Note: The Surface component applies additional padding, radius, and layout.
+ * This utility is the raw glass styling only.
+ */
+.sublime-glassed,
+.sublime-surface--glass {
+  background: rgba(255, 255, 255, 0.11);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(8.6px);
+  -webkit-backdrop-filter: blur(8.6px);
+  border: 1px solid rgba(255, 255, 255, 0.11);
+}
+
+.dark .sublime-glassed,
+[data-theme="dark"] .sublime-glassed,
+.dark .sublime-surface--glass,
+[data-theme="dark"] .sublime-surface--glass {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+}
+
+/* System preference dark mode */
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]):not(.light) .sublime-glassed,
+  :root:not([data-theme="light"]):not(.light) .sublime-surface--glass {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
+  }
+}