From b4ae35884831c89378fe034f8827a212e6780f88 Mon Sep 17 00:00:00 2001
From: CyberSphinxxx <johnlemargonzales@gmail.com>
Date: Tue, 5 Nov 2024 04:24:23 +0800
Subject: [PATCH] Create Global Styling to Policies Page

---
 policies/policies-styles.css                  | 200 ++++++++++++++++++
 .../security-policies/security-policy.html    |   2 +-
 2 files changed, 201 insertions(+), 1 deletion(-)
 create mode 100644 policies/policies-styles.css

diff --git a/policies/policies-styles.css b/policies/policies-styles.css
new file mode 100644
index 0000000..5df5dd5
--- /dev/null
+++ b/policies/policies-styles.css
@@ -0,0 +1,200 @@
+:root {
+    --primary-color: #0054a2;
+    --secondary-color: #ff9900;
+    --background-color: #f9f9f9;
+    --text-color: #333;
+    --card-bg-color: #ffffff;
+}
+
+body {
+    font-family: 'PT Serif', serif;
+    background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    background: linear-gradient(135deg, var(--primary-color) 0%, #003366 100%);
+    color: white;
+    padding: 1rem 0;
+}
+
+.header-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: relative;
+}
+
+.header-nav {
+    position: absolute;
+    left: 0;
+}
+
+.back-button {
+    color: white;
+    text-decoration: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 4px;
+    transition: all 0.3s ease;
+    font-size: 1rem;
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.back-button:hover {
+    background-color: rgba(255, 255, 255, 0.2);
+    transform: translateX(-5px);
+}
+
+.back-button i {
+    font-size: 0.9rem;
+}
+
+.header-logo {
+    flex: 1;
+    text-align: center;
+}
+
+.header-logo a {
+    color: white;
+    font-size: 2rem;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+main {
+    max-width: 1200px;
+    margin: 2rem auto;
+    padding: 0 2rem;
+}
+
+h1 {
+    color: var(--primary-color);
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 2rem;
+}
+
+.policy-section {
+    background-color: var(--card-bg-color);
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    transition: transform 0.3s ease;
+}
+
+.policy-section:hover {
+    transform: translateY(-5px);
+}
+
+h2 {
+    color: var(--primary-color);
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+    display: flex;
+    align-items: center;
+}
+
+h2 i {
+    margin-right: 0.5rem;
+    color: var(--secondary-color);
+}
+
+ul {
+    list-style-type: none;
+    padding-left: 1.5rem;
+}
+
+ul li {
+    margin-bottom: 0.5rem;
+    position: relative;
+}
+
+ul li::before {
+    content: "\2022";
+    color: var(--secondary-color);
+    font-weight: bold;
+    display: inline-block;
+    width: 1em;
+    margin-left: -1em;
+}
+
+.security-features {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 1.5rem;
+    margin-top: 1.5rem;
+}
+
+.feature-card {
+    background-color: var(--card-bg-color);
+    border-radius: 8px;
+    padding: 1.5rem;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-5px);
+}
+
+.feature-card h3 {
+    color: var(--primary-color);
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+}
+
+.feature-card p {
+    font-size: 0.9rem;
+    color: var(--text-color);
+}
+
+.policy-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 2rem;
+}
+
+.grid-subtitle {
+    font-weight: bold;
+}
+
+@media (max-width: 768px) {
+    .header-container {
+        padding: 0 1rem;
+    }
+    
+    .back-button {
+        padding: 0.4rem 0.8rem;
+        font-size: 0.9rem;
+    }
+
+    main {
+        padding: 0 1rem;
+    }
+
+    .policy-section {
+        padding: 1.5rem;
+    }
+
+    h1 {
+        font-size: 2rem;
+    }
+
+    h2 {
+        font-size: 1.5rem;
+    }
+
+    .policy-grid {
+        grid-template-columns: 1fr;
+    }
+}
\ No newline at end of file
diff --git a/policies/security-policies/security-policy.html b/policies/security-policies/security-policy.html
index 7528953..80783fa 100644
--- a/policies/security-policies/security-policy.html
+++ b/policies/security-policies/security-policy.html
@@ -6,7 +6,7 @@
     <title>Security Policy - PasswordSentinel</title>
     <link href="https://fonts.googleapis.com/css2?family=PT+Serif:wght@400;700&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-    <link rel="stylesheet" href="/policies/security-policies/security-policy-styles.css">
+    <link rel="stylesheet" href="/policies/policies-styles.css">
 </head>
 <body>
     <header>